js实时获取浏览器窗口大小

2019年1月12日 10:03:34知更鸟

知更鸟

站长

2322
文章

0
粉丝

Web前端来源：php.cn24,416阅读模式

js实时获取浏览器窗口大小，我们可以使用addEventListener()方法来实现。该addEventListener()方法可以注册事件处理程序以侦听浏览器窗口resize事件，例如window.addEventListener('resize', ...)。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>js实时获取浏览器窗口大小示例</title>
</head>
<body>
<div id="result"></div>
<script>
// 定义事件侦听器函数
function displayWindowSize() {
	// 获取窗口的宽度和高度，不包括滚动条
	var w = document.documentElement.clientWidth;
	var h = document.documentElement.clientHeight;
	// 在div元素中显示结果
	document.getElementById("result").innerHTML = "宽: " + w + ", " + "高: " + h;
}
// 将事件侦听器函数附加到窗口的resize事件
window.addEventListener("resize", displayWindowSize);
// 第一次调用该函数
displayWindowSize();
</script>
</body>
</html>

上述代码中，我们自定义了一个获取窗口宽高的displayWindowSize函数（通过clientWidth和clientHeight属性），然后在addEventListener() 方法中，添加两个参数，分别是“resize”，“displayWindowSize”。

第一个参数则是可以实时监听窗口大小，当窗口每发生变化一次，就会调用第二参数即displayWindowSize函数。

本站文章大部分为原创，用于个人学习记录，可能对您有所帮助，仅供参考！