Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.09.2017, 16:27
Интересующийся
Отправить личное сообщение для TommyWork Посмотреть профиль Найти все сообщения от TommyWork
 
Регистрация: 12.04.2017
Сообщений: 15

События (js) и media запросы (css)
Подскажите, пожалуйста как на практике должно работать, не могу разобраться.

Есть элемент HTML
Код:
<div class="my_div"></div>
В нем находятся другие DOM узлы, которые при разрешения окна браузера не менее 1000px располагаются в строку, а при разрешении менее 1000px в столбик.

Данное действие описано CSS, через медиа
Код:
@media (min-width: 1000px) {
.my_div > div {
 display: inline;
}
}

@media (max-width: 999px) {
.my_div > div {
 display: block;
}
}
Помимо этого, есть функция JavaScript, которая измеряет размер блока с классом my_div, как только происходит изменения размера окна браузера. Пусть функция называется myDivSize();

То есть:
window.addEventListener('resize', myDivSize, false);


Вопрос, если произойдет переход размера окна браузера по ширине с 1000px на 999px или же высота my_div будет меняться от каждого изменения ширины окна браузера (предположим что my_div резиновый), что сработает ранее, media CSS или JS event? Потому что у меня есть предположение, что в event поступает старая информация о высоте блока.

P.S. CSS файл подключен в head, а JS скрипт в самый конец документа перед закрывающим тегом </body> через src=""
Ответить с цитированием
  #2 (permalink)  
Старый 19.09.2017, 19:26
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

.my_div > div {
 display: inline;
}

@media (max-width: 999px) {
.my_div > div {
 display: block;
}
}

Обычно делают так.
Что за необходимость менять размер блока средствами JS?
95% случаев достаточно CSS
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Динамический CSS средствами JS Aspiring Общие вопросы Javascript 9 10.09.2010 18:31
Удаление CSS свойста с помощью JS Hurley Internet Explorer 2 01.10.2009 20:55
CSS Class & JS keysi_ Общие вопросы Javascript 10 29.04.2009 17:37
Как создать ассоциативный массив JS + CSS occlusion Общие вопросы Javascript 3 12.01.2009 08:19
Ajax. Полноценная подгрузка страниц, содержащих CSS и JS. Alex22 AJAX и COMET 6 05.11.2008 22:53