Как сделать так чтобы в мобильной версии удалялся 1 css класс на JS?

Question

[Guser11]

Добрый вечер!
Есть такой вот блок
<div class="navbar show"> тут мой текст.. </div>

Нужен именно JS код(не css) который в мобильной версии (700px и меньше) удалял класс show а в пк версии оставлял
помогите пожалуйста! Спасибо!

Answer 1

[lamer350]

if($(window).width()<700){$('.navbar').removeClass('show')};

Answer 2

[EvgeniySaschenko]

Если на чистом JS то:

if(screen.width <= 700){
	document.querySelector('.navbar').classList.remove('show');
}

Answer 3

[Сергей delphinpro]

const navbar = document.querySelector('.navbar');
matchMedia('(max-width: 700px)').addListener(mq => {
    navbar.classList.toggle('show', mq.matches)
});

Answer 4

[Родион Мещеряков]

Выглядит так, что вам нужны как раз медиа запросы из css. Зачем нужен javascript?

@media (max-width: 700px) {
  .navbar {
    display: none
  }
}

Comments

[Freecreate]

Потому что олени не знают про медиа запросы.