Добавить/Удалить класс от конкретного DIV зависимости от размера экрана

Question

Мне нужно добавить класс .Full-страницу, когда размер экрана > = 769px и удалить тот же класс, когда размер экрана < = 768 , ДИВ мне нужен класс для применения к имеет идентификатор #here Я попытался довольно много вещей, и это то, где я остановился ...

<script> 

    var windowSize = window.innerWidth; 

    if (windowSize >= 769) { 
     console.log('Greater than 768'); 
     document.getElementById('here').addClass = 'full-page';} 

    else (windowSize <= 768) { 
     console.log('Less than 768'); 
     document.getElementById('here').removeClass = 'full-page';} 

</script> 

Кто-нибудь есть совет? Заранее спасибо!

Answer 1

Вы можете использовать window#matchMedia для определить изменения ширины и посмотреть, соответствует ли он определенным критериям. Для добавления и удаления классов используйте classList.

Вы можете увидеть пример here. Измените ширину нижнего правого прямоугольника, перетащив границу.

---

Код:

var classList = document.getElementById('here').classList; 

var minWidth769 = window.matchMedia("(min-width: 769px)"); 

function match() { 
    minWidth769.matches ? classList.add('full-page') : classList.remove('full-page'); 
} 

minWidth769.addListener(match); 

match(); 

Answer 2

Существует не метод добавить | удалить класс в JavaScript, если вы хотите изменить класс для элемента, вы можете использовать

document.getElementById('here').className = 'full-page' 

ИЛИ

document.getElementById('here').setAttribute('class', 'full-page') 

Answer 3

Я думаю, вам нужно использовать JQuery, если вы хотите использовать 'addClass', после того, как ссылки на файл JQuery, Попробуйте

$("#here").addClass("full-page"); 

и

$("#here").removeClass ("full-page");