Javascript код, скрывающий div, не работает (CSS правило @media тоже не работает) - 'не может прочитать свойство null'

Question

Итак, у меня есть button, который display переключает div на click событие. Работает нормально. Тем не менее, я не могу скрыть тот же div, используя почти тот же код (однако я хочу переключить этот div после того, как мой экран станет слишком большим, а не после нажатия), потому что я получаю проблему, как в заголовке - 'не может прочитать нулевой стиль свойства'

Часть, которая не работает (скрытие div после того, как экран становится слишком большим:

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

И часть, которая работает (button переключает div, используя 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-color на @media. Надеюсь, это может помочь. Также спасибо заранее.

Answer 1

Хммм, на самом деле это именно то, для чего созданы медиазапросы. Вы пробовали

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

Если это не сработало: есть ли другие стили css, которые могут перезаписать этот конкретный стиль? Что-то вроде #klik {display: block! Важный; } ...?

Answer 2

Примечание две проблемы:

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. И это именно то, что делает @media в CSS. Он работает на window.onresize за сценой в javascript смысле.

Примечание: я добавил простую иллюстрацию о том, как работать с screen.resize, которую вы можете использовать в качестве основы для изменения свойств элементов на основе определенный диапазон. Все, что вам нужно сделать, это убедиться, что вы выполняете стилизацию внутри этого блока, и он будет работать.