Javascript JS - 无法读取 null 的属性“setAttribute”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34818856/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JS - Cannot read property 'setAttribute' of null
提问by Nikolaus Dr?ger
I am pretty new to javascript and want to code a header of an html site. JS: when the window width is smaller than 1215px --> left part goes 100% width; right part of the header to 0
我对 javascript 很陌生，想编写一个 html 站点的标题。JS：当窗口宽度小于 1215px 时 --> 左边部分变为 100% 宽度；标题的右侧部分为 0
I always get the "Cannot read property 'setAttribute' of null " Error!
我总是收到“无法读取 null 的属性‘setAttribute’”错误！
Please Help! Code:
请帮忙！代码：
if (window.innerWidth < 1215) {
document.getElementById("#headerLeft").setAttribute("style", "width:100%");
document.getElementById("#headerRight").setAttribute("style", "width:0%");
} else {
document.getElementById("#headerLeft").setAttribute("style", "width:50%");
document.getElementById("#headerRight").setAttribute("style", "width:50%");
}body {
margin:0;
}
header{
height:100px;
width:100%;
}
#headerLeft {
background-color:#FF7043;
height:100px;
float:left;
}
#headerRight {
background-color:#FFFFFF;
height:100px;
float:right;
}
.headerTitle {
font-family:'Roboto', sans-serif;
margin:15px;
font-size:70px;
}
#headerRight .headerTitle {
text-align:left;
color:#FF7043;
font-weight:300;
}
#headerLeft .headerTitle {
text-align:center;
color:#FFFFFF;
font-weight:900;
}<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>example</title>
<!-- css -->
<link type="text/css" rel="stylesheet" href="style.css">
<!-- fonts -->
<link href='https://fonts.googleapis.com/css?family=Roboto:400,500,700,900,100,300' rel='stylesheet' type='text/css'>
<!-- javascripts -->
<script language="javascript" type="text/javascript" src="script.js"></script>
</head>
<body>
<header>
<div id="headerLeft">
<p class="headerTitle">example</p>
</div>
<div id="headerRight">
<p class="headerTitle">example</p>
</div>
</header>
<nav>
</nav>
<main>
</main>
<footer>
</footer>
</body>
</html>回答by mynameiscoffey
It is because all of your calls to document.getElementByIdare failing to find anything since there aren't any elements with those IDs. Looks like jQuery habits in play, remove the #from your IDs.
这是因为你所有的调用document.getElementById都没有找到任何东西，因为没有任何带有这些 ID 的元素。看起来像 jQuery 习惯在起作用，#从您的 ID 中删除。
回答by Dmytro
At first do selection by Id without '#'. The second is to set style in such way:
首先通过没有'#'的Id进行选择。第二种是这样设置样式：
document.getElementById('').style.width = "20%";
