我希望我的PHP页面上的一个按钮隐藏并在我的页面上放置一个部分。我有此JavaScript函数：
function toggle_filters(){
var x = document.getElementById("filters");
var displayState = x.style.display;
if(displayState == "none")
{
displayState = "block";
}
else {
displayState = "none";
}
}
我有此HTML代码：
<section id="buttons">
<button id="filter_button">Filters</button>
</section>
<section id="filters">
<form>
<select>
<option>1st option</option>
<option>2nd option</option>
</select>
</form>
</section>
（这是一个简化的版本）
问题是我的浏览器给了我这个错误：
undureck typeerror：无法阅读null的属性'样式'
这是一个带有我的代码的JSFIDDLE：https://jsfiddle.net/90wkwn65/2/
我搜索了互联网，但找不到答案。任何帮助将不胜感激！
执行此操作时：
var displayState = x.style.display;
displayState只是一个包含字符串的变量。它与x.style有零连接。
所以，当您这样做时：
displayState = "block";
您要做的就是更改displayState变量的值 - 与x的style对象完全没有连接。因此，您需要将实际样式对象上的属性分配给实际更改样式。
也从JSFIDDLE中的代码中，您需要更改此信息：
document.getElementById("filter_button").onclick = toggle_filters();
：
document.getElementById("filter_button").onclick = toggle_filters;
当您在函数名称之后放置()时，该功能立即执行，并且返回结果将被应用于OnClick Handler。在这种特殊情况下，您只想将函数引用分配为OnClick处理程序，因此您仅在没有Parens的情况下通过功能名称。
应用这两个更改，此代码在JSFIDDLE中起作用：
function toggle_filters(){
var x = document.getElementById("filters");
if(x.style.display == "none")
{
x.style.display = "block";
}
else {
x.style.display = "none";
}
}
document.getElementById("filter_button").onclick = toggle_filters;
上面的代码在JSFIDDLE中起作用，但是如果您的真实代码仍在获取错误：
Uncaught TypeError: Cannot read property 'style' of null
那么，这是因为您正在运行document.getElementById("filter_button")代码线太早（可能在<head>部分中）。相反，只有在加载DOM之后才能运行该代码。最简单的方法是将<script>标签移至</body>标签之前。有关此问题的更多详细信息，请参见此答案（纯Javascript等效于jQuery的$ .ready（）如何在页面/dom准备就绪时调用功能）。
您可以存储元素。式作为参考，以更改CSS属性，但是您不能以相同的方式存储element.Style.display作为参考。
还分配了ONCLICK函数时，请勿使用括号，否则该函数将执行而不是被分配给单击事件。
（demo）
function toggle_filters() {
var x = document.getElementById("filters");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
document.getElementById("filter_button").onclick = toggle_filters;