>
顶部QQ微信二维码底部

扫描二维码加入优惠券群

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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>js实时获取浏览器窗口大小示例</title>
  6. </head>
  7. <body>
  8. <div id="result"></div>
  9. <script>
  10. // 定义事件侦听器函数
  11. function displayWindowSize() {
  12. // 获取窗口的宽度和高度,不包括滚动条
  13. var w = document.documentElement.clientWidth;
  14. var h = document.documentElement.clientHeight;
  15. // 在div元素中显示结果
  16. document.getElementById("result").innerHTML = "宽: " + w + ", " + "高: " + h;
  17. }
  18. // 将事件侦听器函数附加到窗口的resize事件
  19. window.addEventListener("resize", displayWindowSize);
  20. // 第一次调用该函数
  21. displayWindowSize();
  22. </script>
  23. </body>
  24. </html>

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

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



原文:http://zmingcx.com/js-gets-the-browser-size.html