0

Доброго всем вечера господа

//js
var scrollWidth = document.documentElement.scrollWidth;
var realW = scrollWidth;

имеем переменные, о реальном размере окна, которое смотрит пользователь. Ест-но можно изменить размер экрана (сделать не на весь экран, а на часть). Допустим есть ширина в 1000px и пользователь елозит браузер по ширине, то шире то уже..

Можно как то автоматом менять класс у div'ов в стиле 'туда-обратно', при изменении реальной ширины окна браузера?

//html
<div id="a1" class="a1">
    <div id="a11" class="a11">
    11
    </div>
    <div id="a12" class="a12">
    12
    </div>
    <div id="a13" class="a13">
    13
        <div id="a131" class="a131">
        131
        </div>
        <div id="a132" class="a132">
        132
        </div>
    </div>
</div>

К примеру если загружаем страницу, сразу проверяем, если realW>1000 - стиль один, если меньше - стили другие, но при изменении окна - идет пересчет и изменение автоматом, т.е. в моем случае замена указанных классов

если ширина уменьшается стала меньше 1000, меняем классы у
id1 -> class="a1s"
id11 -> class="a11s"
id12 -> class="a12s"
id13 -> class="a13s"
id131 -> class="a131s"
id132 -> class="a132s"

если ширина уменьшается стала больше 1000, меняем классы на те, что были изначально
id1 -> class="a1"
id11 -> class="a11"
id12 -> class="a12"
id13 -> class="a13"
id131 -> class="a131"
id132 -> class="a132"

2 ответа 2

2

в случае с jQuery стоит смотреть в сторону event resize():

$(window).resize(function () { /* сюда функционал */ });

который срабатыват в момент смены пользователем размера окна, далее:

var width = $('body').innerWidth()

даст вам текущий размер, сравните его с тем критерием, который вы указали и примените нужный класс, предварительно убрав те которые у него уже есть:

if (width < 1000) {
    $('.a1').removeClass('a1').addClass('a1s');
    ... // остальные классы
}

Документация:

1
  • Огх.. вот так бы документация по JQ писалась! Спасибо!
    – sergey
    30 окт 2013 в 15:39
0

Вариант без использования jQuery.

window.onresize = function () {
    document.getElementById ("id").className = "new_class_name";
};

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.