Изменение класса элемента в зависимости от разрешения экрана
Ребята, всем привет!
Занимаюсь версткой проекта, адаптивного, и потребовалось сделать так, чтобы при разрешении экрана менее 700 пикселей, у одного элемента менялся класс. (при этом у него задано 2 класса, что-то типа: class="one two") Изменить нужно именно второй класс "two". Через @media - не вариант, мне конкретно нужно присвоить новый класс элементу. Понимаю, что это нужно сделать средствами js, но как - ума не приложу.. Очень буду рад за подсказку! Понимаю, что вопрос нубовский, но очень надеюсь на вашу помощь.. |
funfot, наверное как-то так
( function ( $, global ) { 'use strict'; $( global ).resize( function () { if ( global.screen.width < 700 ) { $( '.one' ).removeClass( 'two' ).addClass( 'three' ); } } ); } ( jQuery, window ) ); Но я бы на твоем месте так не делал, а добавил три класса, а вот через @media уже менял стили. JS это не выход |
screen.width сообщает нам об экране, а не о реальном окне браузера (может быть не на полный экран открыт, в андроиде тоже уже может на некоторых устройствах окно браузера занимать только часть экрана)
так, что screen.width использовать не надо вместо медиа запросов лучше почитать здесь http://learn.javascript.ru/metrics-window |
Pavel M., никто про браузер и не говорил. Человек конкретно спросил про ширину экрана, я ему ответил. Если бы он спросил про окно браузера я бы написал про окно
|
Часовой пояс GMT +3, время: 20:58. |