JavaScript, если оператор альтернативный синтаксис

Question

Я хочу проверить размер экрана и переключить класс в зависимости от размера экрана.

HTML

<div id="item" class="test"></div>

Скрипт

window.addEventListener("load", toggleClass);
window.addEventListener("resize", toggleClass);


function toggleClass() {

  var w = window.innerWidth;
  item = document.getElementById("item");

  if ( w > 700 ) {
    item.classList.remove("test");
  }else {
    if ( item.classList.contains("test")) {    
    }else {
      item.classList.add("test");
    }
  }
}

Answer 1

Вам не нужно проверять, включен ли test в classList первым - вы можете просто добавить его безоговорочно.Кроме того, избегайте неявного создания глобальных переменных - всегда объявляйте новое имя переменной с var (или, предпочтительно, const или let):

function toggleClass() {
  var w = window.innerWidth;
  var item = document.getElementById("item");

  if ( w > 700 ) {
    item.classList.remove("test");
  }else {
    item.classList.add("test");
  }
}

Answer 2

Вы также можете использовать Условный (троичный) оператор

function toggleClass() {
    var item = document.getElementById("item");
    (window.innerWidth > 700) ? item.classList.remove("test") : item.classList.add("test");
}

Answer 3

Другой подход - вместо добавления класса меньшего размера - используйте медиазапрос, чтобы применить желаемый стиль - очевидно, если вы используете класс для другой цели, чем стиль - этот подход может не сработать - но если все, что вы делаете, это стилизуете элемент на основе ширины экрана - тогда медиа-запрос - ваш друг.

Преимущество этого подхода (если вы изменяете его стиль) состоит в том, что не требуется js - браузер автоматически использует любой стиль, соответствующий медиазапросу. Это лучше для производительности, потому что для запуска нет js.

@media screen and (max-width: 699px) {
 p {
    font-size: 14px
  }
}

@media screen and (min-width: 700px) {
 p {
    font-size: 16px
  }
}