学习使用js监测浏览器窗口大小变化

作者：System 时间：2024年08月21日分类：所有,javascript 字数：733

这篇文章距离上次修改已过238天，其中的内容可能已经有所变动。

在JavaScript中，可以使用window对象的resize事件来监测浏览器窗口的大小变化。以下是一个简单的例子，展示了如何设置一个事件监听器来响应窗口大小的变化，并且输出新的窗口大小。

// 定义一个函数来处理窗口大小变化的事件
function handleResize() {
    // 获取窗口的宽度和高度
    const windowWidth = window.innerWidth || document.documentElement.clientWidth;
    const windowHeight = window.innerHeight || document.documentElement.clientHeight;

    // 输出窗口的新大小
    console.log('窗口宽度: ' + windowWidth + ', 窗口高度: ' + windowHeight);
}

// 设置事件监听器来监听resize事件
window.addEventListener('resize', handleResize);

当你调整浏览器窗口的大小时，handleResize函数会被触发，并输出新的窗口宽度和高度。这个函数首先尝试使用window.innerWidth和window.innerHeight来获取窗口大小，如果这些属性不可用，则会使用document对象的documentElement.clientWidth和documentElement.clientHeight属性。

学习使用js监测浏览器窗口大小变化

评论已关闭

推荐阅读