Как добавить класс в html div id, если ширина устройства меньше заданного значения ширины?

Question

Как добавить класс в html div id, если ширина устройства меньше заданного значения ширины?

Это мой текущий идентификатор div без класса:

<div id="my-id">
some content
</div>

После следующей проверки (псевдокод),

if @media (max-width: 767px) {
==add "the-new-class" to the div id==
}

мой div должен быть следующим:

<div id="my-id" class="the-new-class">
some content
</div>

Неважно, если используется jQuery или php. Tnx.

0

html jquery media-queries php

Решение

Другие решения

Вы можете легко сделать это, используя jquery:

$(window).setsize(function() {
var currentwidth = $(window).width();
if(currentwidth <= 767)
{
$('#my-id').addClass('the-new-class');
}
else
{
$('#my-id').removeClass('the-new-class');
}
})

1

Попробуйте этот код с JavaScript:

<script>
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
console.log(width);
if(width > 500)
{
document.getElementById('my-id').setAttribute("class", "the-new-class");
}
</script>

1

Источник

Accepted Answer

Это должно сделать трюк:

$(function() {
$(window).resize(function(){
if(window.matchMedia('(min-width: 767px)')){
$('#id').addClass('someClassName');
}else{
$('#id').removeClass('someClassName');
}
});
});

Он использует Jquery и новую функцию matchMedia. Эта функция соответствует способу, которым движок браузера css вычисляет ширину окна.

1