Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Изменение класса элемента в зависимости от разрешения экрана (https://javascript.ru/forum/dom-window/50287-izmenenie-klassa-ehlementa-v-zavisimosti-ot-razresheniya-ehkrana.html)

funfot 19.09.2014 19:31

Изменение класса элемента в зависимости от разрешения экрана
 
Ребята, всем привет!

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

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

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

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

d.skuratovich 19.09.2014 22:56

funfot, наверное как-то так
( function ( $, global ) {
	'use strict';

	$( global ).resize( function () {
		if ( global.screen.width < 700 ) {
			$( '.one' ).removeClass( 'two' ).addClass( 'three' );
		}
	} );
} ( jQuery, window ) );


Но я бы на твоем месте так не делал, а добавил три класса, а вот через @media уже менял стили. JS это не выход

Pavel M. 20.09.2014 15:14

screen.width сообщает нам об экране, а не о реальном окне браузера (может быть не на полный экран открыт, в андроиде тоже уже может на некоторых устройствах окно браузера занимать только часть экрана)

так, что screen.width использовать не надо вместо медиа запросов

лучше почитать здесь http://learn.javascript.ru/metrics-window

d.skuratovich 20.09.2014 15:20

Pavel M., никто про браузер и не говорил. Человек конкретно спросил про ширину экрана, я ему ответил. Если бы он спросил про окно браузера я бы написал про окно


Часовой пояс GMT +3, время: 20:58.