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

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

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
版权声明
本站原创文章转载请注明文章出处
HTML5视频自动循环播放 Web前端

HTML5视频自动循环播放

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

HTTPS与HTTP相比更安全

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

jQuery各版本下载大全

jquery-2.0以上版本不再支持IE 6/7/8, 并不是最新的版本就最好的,而是根据您项目需求所适合的版本! 百度引用地址 (推荐目前最稳定的,不会出现延时打不开情况) jquery-3.4.1...
匿名

发表评论

匿名网友 填写信息

:?: :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

        不错,不错