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

知更鸟
知更鸟
知更鸟
1607
文章
6919
评论
2019年1月12日10:03:34来源:php.cn 2 2.4K

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函数。

weinxin
版权声明
本站原创文章转载请注明文章出处
禁止查看网页源代码方法 Web前端

禁止查看网页源代码方法

总是有新手问,如何禁止别人查看自己的网页源代码?答案是没有,对于有经验者所有方法都是徒劳的。 禁止查看网页源代码方法 一般常用的方法是在网页中加上类似的JS代码,屏蔽屏蔽键盘和鼠标右键。 docume...
HTML5视频自动循环播放 Web前端

HTML5视频自动循环播放

如果需要在网页中添加视频,可以参考下面的代码,支持MP4视频自动循环播放。 代码一,纯HTML5视频自动循环播放 <!DOCTYPE HTML> <html> <body...
HTTPS与HTTP相比更安全 Web前端

HTTPS与HTTP相比更安全

近几年,互联网发生着翻天覆地的变化,尤其是我们一直习以为常的HTTP协议,在逐渐的被HTTPS协议所取代,在浏览器、搜索引擎、CA机构、大型互联网企业的共同促进下,互联网迎来了“HTTPS加密时代”,...
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

评论:2   其中:访客  2   博主  0
    • VEXS VEXS 4

      可以的 :wink:

      • 蓝色创想 蓝色创想 1

        不错,不错