Изменение класса элемента при изменении разрешения экрана

Рейтинг: 0Ответов: 1Опубликовано: 19.09.2014

Ребята, всем привет!

Занимаюсь версткой проекта, адаптивного, и потребовалось сделать так, чтобы при разрешении экрана менее 700 пикселей, у одного элемента менялся класс (при этом у него задано 2 класса, что-то типа: class="one two").

Изменить нужно именно второй класс "two".
Через @media - не вариант, мне конкретно нужно присвоить новый класс элементу.

Понимаю, что это нужно сделать средствами js, но как - ума не приложу.

Очень буду рад за подсказку!
Понимаю, что вопрос нубовский, но очень надеюсь на вашу помощь.

css javascript экран адаптивная-верстка
Источник: Stack Overflow на русском

Ответы

▲ 1

В JavaScript невозможно вычислить ширину так же, как это делается с помощью media-queries в CSS.
Однако есть хитрый способ обойти это ограничение.
Можно транслировать текущий порог ширины экрана в качестве css-свойства для невидимого элемента, например, head, а в javascript читать значение этого свойства.

CSS

/* @media трансляторы для javascript */
@media (min-width: 320px) {
    head {
        width: 320px;
    }
}
@media (min-width: 480px) {
    head {
        width: 480px;
    }
}
@media (min-width: 700px) {
    head {
        width: 700px;
    }
}

Чтобы было честно, написал на чистом javascript.

window.load = function(){
    // Теперь мы знаем актуальную ширину экрана
    var media_size = parseInt(window.getComputedStyle(document.head, null)
                                    .getPropertyValue('width'), 10);

    switchClass();

    window.resize = function () {
        // Обновляем ширину экрана
        media_size = parseInt(window.getComputedStyle(document.head, null)
                                    .getPropertyValue('width'), 10);
        switchClass();
    };
};

function switchClass() {
    if(media_size  < 700) {
        // ...
    }
    else{
        // ...
    }
}