js监听html页面大小变化,JS监听窗口变化实时获取浏览器窗口大小

原理：通过监听窗口的变化来动态获取窗口大小

用到的方法：addEventListener() 监听window的resize事件

js代码：

// 定义事件侦听器函数

function watchWindowSize() {

// 获取窗口的宽度和高度，不包括滚动条

var w = document.documentElement.clientWidth;

var h = document.documentElement.clientHeight;

// 打印结果

console.log("result").innerHTML = "宽: " + w + ", " + "高: " + h;

}

// 将事件侦听器函数附加到窗口的resize事件

window.addEventListener("resize", watchWindowSize);

// 第一次调用该函数

watchWindowSize();

上述代码通过window.addEventListener(“resize”, watchWindowSize)实时监听窗口变化。每次变化都会调用一次watchWindowSize方法去重新获取窗口宽高。

更多前端知识请浏览前端园地其它文章^_^！