js获取网页尺寸(常用)

 2017年03月22日 分类:JavaScript/前端设计  评论(0)  阅读(1762)

浏览器窗口内部域宽:window.innerWidth

浏览器窗口内部域高:window.innerHeight

可以获取浏览器窗口的内部宽度和高度。内部宽高是指除去菜单栏、工具栏、边框等占位元素后(不包括滚动条),用于显示网页的净宽高。也就是图中的可视区域+滚动条尺寸(滚动条包括横向和竖向),如果文档超出了可视区域,那么超出部分不包括在内。

如果想要获得不包括浏览器滚动条的宽度(也就是图中的可视区域),可以使用下面两种方法:

document.documentElement.clientWidth

document.documentElement.clientHeight

如果你仅仅是想获得body文档的高度(不包括滚动条的宽度),那么可以使用下面两种方法

文档域宽:document.body.clientWidth

文档域高:document.body.clientHeight

同时有些朋友不清楚body和documentElement的区别,网上找的资料如下:

body是DOM对象里的body子节点,即 <body> 标签;

documentElement是整个节点树的根节点root,即<html> 标签;

另外,在没使用DTD情况即怪异模式BackCompat下:

body和documentElement两种方式相等。

在使用DTD情况即标准模式CSS1Compat下:

body表示的依然是文档的正常尺寸,但是documentElement确表示的和确和window一样。

如何获取DTD模式呢?

通过document.compatMode即可。

总结:

scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大。

clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变。

offsetWidth:对象整体的实际宽度,包滚动条等边线,会随对象显示大小的变化而改变。

元素内无内容或者内容不超过可视区,滚动不出现或不可用的情况下。

scrollWidth=clientWidth,两者皆为内容可视区的宽度。

offsetWidth为元素的实际宽度。

元素的内容超过可视区,滚动条出现和可用的情况下。

scrollWidth>clientWidth。

scrollWidth为实际内容的宽度。

clientWidth是内容可视区的宽度。

offsetWidth是元素的实际宽度。

最后还有一个完整的总结图

网页可见区域宽: document.body.clientWidth
网页可见区域高: document.body.clientHeight
网页可见区域宽: document.body.offsetWidth (包括边线的宽)
网页可见区域高: document.body.offsetHeight (包括边线的高)
网页正文全文宽: document.body.scrollWidth
网页正文全文高: document.body.scrollHeight
网页被卷去的高: document.body.scrollTop
网页被卷去的左: document.body.scrollLeft
网页正文部分上: window.screenTop
网页正文部分左: window.screenLeft
屏幕分辨率的高: window.screen.height
屏幕分辨率的宽: window.screen.width
屏幕可用工作区高度: window.screen.availHeight

屏幕可用工作区宽度: window.screen.availWidth

jQuery

获取浏览器显示区域的高度 : $(window).height();
获取浏览器显示区域的宽度 :$(window).width();
获取页面的文档高度 :$(document).height();
获取页面的文档宽度 :$(document).width();

获取滚动条到顶部的垂直高度 :$(document).scrollTop();
获取滚动条到左边的垂直宽度 :$(document).scrollLeft();

计算元素位置和偏移量
offset方法是一个很有用的方法,它返回包装集中第一个元素的偏移信息。默认情况下是相对body的偏移信息。结果包含 top和left两个属性。
offset(options, results)
options.relativeTo  指定相对计 算偏移位置的祖先元素。这个元素应该是relative或absolute定位。省略则相对body。
options.scroll  是否把 滚动条计算在内,默认TRUE
options.padding  是否把padding计算在内,默认false
options.margin   是否把margin计算在内,默认true
options.border  是否把边框计算在内,默认true

参考资料:

http://www.cnblogs.com/kongxianghai/p/4192032.html

http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001434499832124d97d77b00706461f9daf1a390b75ade1000

http://www.cnblogs.com/lpshan/p/4432340.html

wechat_app
微信公众号:webapp_club
关注一下,或许能让你获得更多前端咨询信息。
加载中...

评论 抢沙发

评论前必须登录(开发中...)