主页 / 问题 / 1548571
Accepted
Bemfes
Asked:2023-10-29 23:27:06 +0000 UTC2023-10-29 23:27:06 +0000 UTC

如何使用javascript根据浏览器窗口大小更改元素样式

  • 772

如何使用 javascript 跟踪浏览器窗口大小变化并根据大小更改元素样式？假设有一个红色 div（任意宽度和高度），如果窗口宽度为 540 像素或更小，则该 div 应变为绿色。请告诉我如何实施？我了解 css @media，我需要 javascript。

javascript

1 个回答

  1. Best Answer

    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();
    • 1

相关问题