javascript “未捕获的类型错误：无法在 .. 处读取 null 的属性‘样式’”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46037924/
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
"Uncaught TypeError: Cannot read property 'style' of null at.. "
提问by Johnny
I practiced the styling as shown below in a different document and it worked there for paragraphs and buttons but, for divs, however, it refuses to do so.
我在不同的文档中练习了如下所示的样式，它在段落和按钮上工作，但是，对于 div，它拒绝这样做。
The first document.getElementById('red').style.width="100px";statement returns an error
第一条document.getElementById('red').style.width="100px";语句返回错误
"Uncaught TypeError: Cannot read property 'style' of null at.. "
“未捕获的类型错误：无法在 .. 处读取 null 的属性‘样式’”
When I tried it in another document, it worked without placing the styles inside a function myFunction() {}statment
当我在另一个文档中尝试它时，它无需将样式放在function myFunction() {}语句中即可工作
Any ideas?
有任何想法吗？
<div class="red" > some content</div>
<div class="blue" > some content</div>
<div class="green" > some content</div>
<script type="text/javascript">
document.getElementById('red').style.width="100px";
document.getElementById('blue').style.width="100px";
document.getElementById('green').style.width="100px";
document.getElementById('red').style.height="100px";
document.getElementById('blue').style.height="100px";
document.getElementById('green').style.height="100px";
document.getElementById('red').style.backgroundColor="red";
document.getElementById('blue').style.backgroundColor="blue";
document.getElementById('green').style.backgroundColor="green";
document.getElementById('red').style.borderRadius="50px";
document.getElementById('blue').style.borderRadius="50px";
document.getElementById('green').style.borderRadius="50px";
document.getElementById('red').onclick.display="none";
document.getElementById('blue').onclick.display="none";
document.getElementById('green').onclick.display="none";
</script>
回答by Melcma
Cannot read property 'style' of nullthis gives you great hint - of null. It does mean, it doesn't find element you are looking for.
Cannot read property 'style' of null这给了你很好的提示 - of null。这确实意味着，它没有找到您正在寻找的元素。
It's simply because in html you are using classes <div class="red">
这仅仅是因为在 html 中您使用的是类 <div class="red">
and ids in javascript document.getElementById('red')
和 javascript 中的 id document.getElementById('red')
Stick to classes:
坚持上课：
document.getElementsByClassName('red')[0]
or convert to id
或转换为 id
<div id="red">
回答by Gabriel Mesquita
I think you need to add id to your div's
我认为您需要将 id 添加到您的 div 中
<div class="red" id="red" > some content</div>
document.getElementById('red').style.width="100px";
回答by Kai Adelmann
Change (or add) "class='xxx'" to "id='xxx'", then you will be able to get the elements by the corresponding IDs. Otherwise you can try and use https://www.w3schools.com/jsreF/met_document_getelementsbyclassname.asp
将“class='xxx'”更改（或添加）为“id='xxx'”，即可通过对应的ID获取元素。否则你可以尝试使用https://www.w3schools.com/jsreF/met_document_getelementsbyclassname.asp
