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

Question

所以，我有一个button ， display在click事件上切换div 。 它工作正常。 但是，我无法使用几乎相同的代码隐藏相同的div （但是，我想在屏幕变得太大后切换此div ，而不是在单击后），因为我遇到了标题中的问题 - 'cannot read property null 样式

不起作用的部分（在屏幕变得太大后隐藏一个div ：

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

以及有效的部分（ button使用click event切换div ）：

function showDiv() {
  if (document.getElementById('klik').style.display == 'block'){
    document.getElementById('klik').style.display = 'none';
  }
  else{
    document.getElementById('klik').style.display = 'block';
  }
}

我写这段代码是因为我想做一个可扩展的菜单，在点击它后显示一个带有列表项的div 。 菜单button仅在screen-width <= 900px时可见，如果screen-width > 900px我有一个正常的导航栏并且button消失。

我是不是忘记了什么？ 我是 Javascript 的新手。 还多了一个东西─它也不会使用工作@media规则，但是我可以改变background-color与@media 。 我希望它会有所帮助。 也提前致谢。

Answer 1

注意两个问题：

1. 确保您要更改其display的元素具有id="klik"

2. 下面的代码只会执行一次。

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

   • 但为什么？ 答案是因为您没有设置一个event来在每次resize屏幕resize时运行它。 此外， screen.width将始终返回显示的width 。 您正在寻找的是window.innerWidth

所以一个可能的解决方案：

 window.addEventListener('resize', function(){ document.getElementById("screen").innerHTML = window.innerWidth.toString() + "px"; if(window.innerWidth < 900) { //Perform your desired Executions Here } });

 <div id="screen"></div>

这将在每次触发window.onresize时运行代码。 而这正是 CSS 中的@media所做的。 它适用于 javascript 意义上的幕后window.onresize 。

注意：我添加了一个关于如何使用screen.resize的简单说明，您可以将其用作基于特定范围修改元素属性的基础。 您需要做的就是确保您在该块内进行样式设置并且它会起作用。

Answer 2

嗯，实际上这正是媒体查询的目的。 你试过了吗

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

如果这不起作用：是否还有其他 css 样式可能会覆盖该特定样式？ 类似 #klik { display: block !important; } ...？