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

Question

So, I've got a button that display toggles a div on a click event. It works properly. However, I can't hide the same div using nearly the same code (however, I want to toggle this div after my screen becomes too big, not after clicking), because I get the problem like in the title- 'cannot read property style of null'

The part that doesn't work (hiding a div after screen becomes too big:

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

And the part that works ( button toggles a div using 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';
  }
}

I wrote this code because I want to do a scalable menu, displaying a div with list items inside after clicking on it. The menu button is visible only when screen-width <= 900px , if screen-width > 900px I've got a normal navigation bar and the button disappears.

Am I forgetting something? I'm new to Javascript. Also one more thing- it also doesn't work using @media rule, however I can change the background-color with @media . I hope it might help. Also thanks in advance.

Answer 1

Note Two Problems:

1. Ensure that the element you want to change it's display has the id="klik"

2. The below code will execute only once.

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

   • But why? The answer is because you didn't set an event to run it every time when your resize the screen. Also, screen.width will always return the width of the display. What you are looking for is the window.innerWidth

So a possible solution:

 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>

This will run the code every time a window.onresize is triggered. And that's exactly what @media in CSS does. It works on window.onresize behind the scene in javascript sense.

Note: I have added a simple illustration on how to work with screen.resize which you can use as the basis for modifying element properties based on a certain range. All you need to do, is to ensure that you do your styling within that block and it will work.

Answer 2

Hmmm, actually this is exactly what media queries are made for. Did you try

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

If that doesn't work: Are there any other css styles that may overwrite that particular style? Something like #klik { display: block !important; } ...?