как изменить стиль элемента в зависимости от размера окна браузера с помощью javascript

Question

Как отслеживать изменения размера окна браузера и менять в зависимости от размера стиль элемента с помощью javascript? Допусти, есть div красного цвета (ширина и высота любые), а при ширине окна в 540 пикселей и меньше, этот div должен стать зеленым. Подскажите, пожалуйста, как такое можно реализовать? Про css @media знаю, мне нужен именно javascript.

Answer 1

const block =document.querySelector('.block');
function updateBlockStyle() {
  const windowWidth = window.innerWidth;
  
  if (windowWidth <= 540) {
    block.style.backgroundColor = 'green';
  } else {
    block.style.backgroundColor = 'red';
  }
}

window.addEventListener("resize", updateBlockStyle);

body{
  margin: 0;
}

.block{
  background-color: #f00;
  height: 200px;
  width: 80%;
}

<div class="block"></div>

Можно на событие window.addEventListener("resize") повесить отслеживатель. Если вам необходимо контролировать повороты мобильного (портрет/пейзаж) то можно отслеживать другие события.

function handleOrientationChange() {
  if (window.matchMedia("(orientation: portrait)").matches) {
    // Устройство находится в портретном режиме.
    console.log("Устройство в портретном режиме.");
  } else {
    // Устройство находится в пейзажном режиме.
    console.log("Устройство в пейзажном режиме.");
  }
}

// Добавляем обработчик события orientationchange.
window.addEventListener("orientationchange", handleOrientationChange);

// Изначально вызываем обработчик для определения ориентации при загрузке страницы.
handleOrientationChange();

БЛОГ НА HUSL

как изменить стиль элемента в зависимости от размера окна браузера с помощью javascript

Ответы (1 шт):