首页 > 编程笔记 > JavaScript笔记 > JS操作CSS样式 阅读数:185

JS获取浏览器窗口大小

获取 <html> 标签的 clientWidth 和 clientHeight 属性,就可以知道浏览器窗口的可视宽度和高度,而 <html> 标签在脚本中表示为 document.documentElement。可以这样设计:
var w = document.documentElement.clientWidth;  //返回值不包含滚动条的宽度
var h = document.documentElement.clientHeight;  //返回值不包含滚动条的宽度

在怪异模式下,body 是最顶层的可视元素,而 html 元素保持隐藏,所以只有通过 <body> 标签的 clientWidth 和 clientHeight 属性才可以知道浏览器窗口的可视宽度和高度,而 <body> 标签在脚本中表示为 document.body。可以这样设计:
var w = document.body.clientWidth; 
var h = document.body.clientHeight; 

把上面两种方法兼容起来, 设计代码如下:
var w = document.documentElement.clientWidth || document.body.clientWidth;
var h = document.documentElement.clientHeight || document.body.clientHeight;
如果浏览器支持 documentElement,则使用 documentElement 对象读取;如果该对象不存在,则使用 body 对象读取。

如果窗口包含内容超出了窗口可视区域,则应该使用 scrollWidth 和 scrollHeight 属性来获取窗口的实际宽度和高度。

对于 document.documentElement 和 document.body 来说,不同浏览器对它们的支持略有差异。例如:
<body style="border : solid 2px blue; margin : 0; padding : 0">
    <div style="width : 2000px; height : 1000px; border : solid 1px red;">
    </div>
</body>
<script>
    var wb = document.body.scrollWidth;
    var hb = document.body.scrollHeight;
    var wh = document.documentElement.scrollWidth;
    var hh = document.documentElement.scrollHeight;
</script>
不同的浏览器使用 documentElement 对象获取浏览器窗口的实际尺寸是一致的,但是使用 body 对象来获取对应尺寸就会存在解析差异,在实际设计中应该考虑这个问题。

爱面试的程序媛,一个分享面试经验的公众号。跟着站长一起学习,每天都有进步。

通俗易懂,深入浅出,定时分享程序员面试的那点事。

面试如何造火箭?工作如何拧螺丝?都在这个公号哦。

扫描二维码关注公众号,免费领取价值 1000 元的求职面试资料(限时免费)!

当你决定关注「爱面试的程序媛」,你已然超越了90%的程序员!

爱面试的程序媛二维码
微信扫描二维码关注

所有教程

相关文章