时间戳

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

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

问题描述

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

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

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

和工作的部分（button切换 adiv使用 a click event）：

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-colorwith @media。我希望它可能会有所帮助。也提前感谢。

标签： javascripthtmlcss

解决方案

注意两个问题：

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

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

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

    • 但为什么？答案是因为您没有设置event每次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触发 a 时运行代码。这正是@mediaCSS 所做的。它window.onresize在 JavaScript 意义上在幕后工作。

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

推荐阅读