隐藏div的Javascript代码不'；不起作用（CSS@media规则也不起作用）&&x27；无法读取null'；的属性样式；

因此，我有一个

按钮

，

显示

在

点击

事件上切换

div

。它工作正常。但是，我无法使用几乎相同的代码隐藏相同的

div

（但是，我想在屏幕变得太大后切换此

div

，而不是单击之后），因为我遇到了标题中的问题-“无法读取null的属性样式”

无法工作的部分（在屏幕变得太大后隐藏

div

：

if (screen.width > 900) {
  document.getElementById('klik').style.display = 'none';
}

以及工作的部分（

按钮

使用

单击

事件

切换

div

）：

我写这段代码是因为我想做一个可伸缩的菜单，在点击后显示一个带有列表项的

div

。菜单

按钮

只有在

屏幕宽度900px

我有一个正常的导航栏并且

按钮

消失时才可见

---

我忘了什么吗？我是Javascript新手。还有一件事-使用

@media

规则它也不起作用，但是我可以使用

@media

更改

背景色。我希望这可能会有所帮助。同时提前感谢。
注意两个问题：

确保要更改其显示的元素具有
id=“klik”

下面的代码将只执行一次

if（screen.width>900）{document.getElementById（'klik'）.style.display='none'；}


但是为什么呢？
答案是因为您没有设置
事件
以在每次调整屏幕大小时运行它。此外，
screen.width
将始终返回显示器的
宽度。您要查找的是
窗口。innerWidth


因此，可能的解决方案是：


window.addEventListener（'resize'，function（）{
document.getElementById（“screen”）.innerHTML=window.innerWidth.toString（）+“px”；
如果（窗内宽度<900）
{
//在这里执行您想要的执行
}
})；
注意两个问题：

确保要更改其显示的元素具有
id=“klik”

下面的代码将只执行一次

if（screen.width>900）{document.getElementById（'klik'）.style.display='none'；}


但是为什么呢？
答案是因为您没有设置
事件
以在每次调整屏幕大小时运行它。此外，
screen.width
将始终返回显示器的
宽度。您要查找的是
窗口。innerWidth


因此，可能的解决方案是：


window.addEventListener（'resize'，function（）{
document.getElementById（“screen”）.innerHTML=window.innerWidth.toString（）+“px”；
如果（窗内宽度<900）
{
//在这里执行您想要的执行
}
})；
Hmmm，实际上这正是媒体查询的目的。你试过了吗

@media (min-width: 900px) {
  #klik {
    display:  none;
  }
}

如果这不起作用：是否有其他css样式可能覆盖该特定样式？类似于#klik{display:block！important；}…？
Hmmm，实际上这正是媒体查询的目的。您尝试过吗

@media (min-width: 900px) {
  #klik {
    display:  none;
  }
}

如果这不起作用：是否有其他css样式可以覆盖该特定样式？类似于#klik{display:block！important；}…？
是“display”在元素上显式设置属性？否则，它将返回空字符串这些脚本如何包含在页面上？在请求将某些内容隐藏到文档中时，是否确定DOM已完全加载？请尝试
document.addEventListener（'DOMContentLoaded'，function（）{//your code goes here}，false）
无法读取null的属性样式
——听起来像是
文档。getElementById（'klik'）
根据错误不存在。@displacedtexan正确。这是第一个问题。但代码仍然无法工作，因为他没有在每次调整窗口大小时运行它-至少从他提供的内容判断是这样的。是在元素上显式设置“display”属性？否则，它将返回一个空字符串这些脚本如何包含在页面上？在请求隐藏某些内容时，是否确定DOM已完全加载？请尝试
document.addEventListener（'DOMContentLoaded'，function（）{//your code goes here}，false）；
无法读取null的属性样式
--听起来像是
document.getElementById（'klik'））
根据错误不存在。@displacedtexan正确。这是第一个问题。但代码仍然不起作用，因为他没有在每次调整窗口大小时运行它——至少从他提供的内容来看是这样。遗憾的是，它也不起作用。而且它甚至没有像你前面提到的那样执行一次。它不应该执行一次。我认为你做得不对…每次调整大小时它都必须运行，因为它必须检查宽度，然后进行样式设置…请共享你的HTMl，因为再次创建HTMl需要时间来为你演示。如果你没事，请标记为答案。下次当你问起时，你应该包含HTMl，以便更容易诊断。很遗憾也不起作用。正如你前面提到的，它甚至不会执行一次。它不应该执行一次。我认为你做得不对…每次调整大小时，它都必须运行，因为它必须检查宽度，然后进行样式设置…请共享你的HTMl，因为再次创建HTMl需要时间为你演示。标记为下一次当你问的时候，你应该包括HTML，这样更容易诊断。那么，其他一些样式可能会妨碍你。找出