窗口大小调整事件JavaScript

JavaScript提供了一种方便的方法来检测窗口大小的调整事件，并在其发生时调用相应的函数。这在网页设计中很有用，因为网页可能需要根据窗口大小进行布局和调整。

监听窗口大小调整事件

使用window.addEventListener()方法监听窗口大小调整事件并调用相应的函数。

window.addEventListener('resize', function() {
  // 在此处编写窗口大小调整事件的处理函数
});

resize是事件名称，而function()是事件处理函数。当浏览器窗口的大小调整时，将自动调用该函数。

获取窗口大小

在事件处理函数中，可以使用window.innerWidth和window.innerHeight属性来获取窗口的宽度和高度，以像素为单位。

window.addEventListener('resize', function() {
  let width = window.innerWidth;
  let height = window.innerHeight;
  console.log('窗口大小为：' + width + 'x' + height);
});

操作DOM元素

可以使用JavaScript操作DOM元素以响应窗口大小调整事件。例如，可以更改元素的CSS属性以使其适应新的窗口大小。

window.addEventListener('resize', function() {
  let width = window.innerWidth;
  let height = window.innerHeight;
  let element = document.getElementById('my-element');
  element.style.width = width + 'px';
  element.style.height = height + 'px';
});

在此示例中，my-element是网页中的某个元素的ID。随着窗口的大小调整，该元素的宽度和高度将随之变化。

以上是监听窗口大小调整事件的方法和在事件处理函数中获取窗口大小及操作DOM元素的简单示例。通过使用这些技术，程序员可以创建动态和自适应的网页，以实现不同大小的设备和屏幕。