Как в JS задать css правило и пересчитывать его при любом изменении?

Question

[Martyer]

Здравствуйте.
Столкнулся с такой проблемой.. имеется блок, которому задано свойство position: absolute с нужными координатами. Всё вроде бы отлично, но при изменении ВЫСОТЫ окна браузера блок остается там, где был раньше, а не идёт дальше.
Может кто писал уже подобный скрипт или видел где-нибудь? Буду благодарен любой подсказке.

Answer 1

[Алексей Николаев]

Задайте координаты в процентах или vh - тогда блок будет двигаться автоматически, или пересчитывайте при window.resize

Comments

[Martyer]

Проценты нельзя.) а что касается vh, так нужна поддержка всех браузеров без исключения. но всё-равно спасибо за Ваш ответ)

[Алексей Николаев]

Martyer: тогда цепляйтесь к window.resize, и каждый раз высчитывайте window.height - modal.height / 2, или какие у вас критерии

Answer 2

[Сергей ZSA]

У вас наверно в px позиционирование сверху. Оно будет всегда неподвижным если вы так задали, потому что top всегда считается от верхней части родителя (будь то body или relative), а они будут стоять соответственно всегда на своём месте вне зависимости от окна браузера (верхняя граница на своём месте)

Коряво объяснил, поздно уже, спать охота. Мож кто может - объяснит лучше.

Если вам хочется поменять расположение элемента при меньшем окне - попробуйте использовать % вместо px в указаниях top. Если нужно менять под конкретный размер экрана - стоит посмотреть на @ media запросы в CSS. JS в вашем случае думаю не нужен совсем. К примеру при max-height: 700px делать у определенного элемента top больше/меньше ну и тп.

Comments

[Martyer]

Проценты нельзя использовать.) спасибо за Ваш ответ)

Answer 3

[Cyber_bober]

если вы пытаетесь сделать вертикальное центрирование внутри контейнера то

top:50%;
margin-top: -(высота объекта деленная на два);

а вообще код и цель и в студию, ясновидцы на другой ветке тусят)

Answer 4

[Евгений Бакулин]

1) про % Вам уже написали - задавайте координаты не в px, а в %
2) если так уж хочется менять стили из JavaScript - все стили содержатся в свойстве style - например, elem.style.color="#561714";
elem - Ваш элемент
Эта операция в JavaScript равносильна CSS-правилуcolor: #561714
(строго говоря, добавлению атрибута style="color: #561714" к Вашему HTML-элементу)