Window与Document中的宽高
# Window和Document
JS下宽高分为挂载在Window对象
和Document对象
下的宽高属性,先说下Window
和Document
的区别:
Window对象
表示浏览器中打开的窗口,window对象
可以省略,比如window.alert()
可以简写为alert()
。Document对象
是Window对象
的一部分,那么window.document.body
我们可以写成document.body
。window
对象的location
属性引用的是location
对象,表示该窗口中当前显示文档的URL
,document
的对象的location
属性也是引用location
对象,所以window.location === document.location
。
# Window下的宽高属性:
window.innerWidth:浏览器窗口内部宽度
window.innerHeight:浏览器窗口内部高度
window.outerWidth:浏览器窗口外部宽度
window.outerHeight:浏览器窗口外部高度
//以下属性为用户屏幕的相关信息
window.screen.width:屏幕宽度
window.screen.height:屏幕高度
window.screen.availWidth:屏幕的可使用宽度
window.screen.availHeight:屏幕的可使用高度
window.screenTop:浏览器窗口距屏幕顶部的距离
window.screenLeft:浏览器窗口距屏幕左侧的距离
2
3
4
5
6
7
8
9
10
11
12
注意
innerWidth、innerHeight
和outerWidth、outerHeight
是不支持IE9
以下版本的
参考图如下:
# Document下的宽高属性
可通过 elem.属性
或 elem.方法
的方式使用
Docment
下有三类属性:
- 与
client
相关的宽高 - 与
offset
相关的宽高 - 与
scroll
相关的宽高
# 与client
相关的宽高:
document.body.clientWidth
document.body.clientHeight
document.body.clientLeft
document.body.clientTop
2
3
4
clientWidth
和clientHeight
该属性指的是元素的可视部分宽度和高度,即padding+content
- 如果没有滚动条,即为元素设定的高度和宽度
- 如果出现滚动条,滚动条会遮盖元素的宽高,那么该属性就是其本来宽高减去滚动条的宽高
clientLeft
和clientTop
这两个指的是元素周围边框的厚度,如果不指定一个边框或者不定位该元素,它的值就是0
clientTop = border-top.border-width
clientLeft = border-left.border-width
2
获取浏览器窗口可视区域大小(兼容各浏览器):
提示
document.body是DOM对象中的body子节点,就是使用'body'标签来定义的。
document.documentElement是整个DOM节点树的根节点,就是用'html'标签来定义的。
var w = document.documentElement.clientWidth || document.body.clientWidth;
var h = document.documentElement.clientHeight || document.body.clientHeight;
2
# 与offset
相关宽高介绍
document.body.offsetWidth
document.body.offsetHeight
document.offsetLeft
document.offsetTop
2
3
4
offsetWidth
与offsetHeight
这一对属性指的是元素的border + padding + content
的宽度和高度。 该属性与其内部的内容是否超出元素无关,只与本来设定的border
以及padding
和content
有关。offsetLeft
和offsetTop
这两个属性是基于offsetParent
的。
提示
什么是offsetParent
?
- 如果当前元素的父级元素没有进行
CSS
定位(position
为absolute
或relative
),offsetParent
为body
。 - 假如当前元素的父级元素中有
CSS
定位,offsetParent
取最近的那个父级元素。
在IE6/7
中:offsetLeft = ( offsetParent 的 padding - left ) + ( 当前元素的 margin - left )
在IE8/9/10
及Chrome
中:offsetLeft=(offsetParent的margin-left)+(offsetParent的border宽度)+(offsetParent的padding-left)+(当前元素的margin-left)
在FireFox
中:offsetLeft=(offsetParent的margin-left)+(offsetParent的padding-left)+(当前元素的margin-left)
# 与scroll
相关宽高介绍
document.body.scrollWidth
document.body.scrollHeight
document.body.scrollLeft
document.body.scrollTop
2
3
4
scrollWidth
和scrollHeight
:
- 给定宽高小于浏览器窗口:
scrollWidth
= 浏览器窗口的宽度
scrollHeight
= 浏览器窗口的高度
给定宽高大于浏览器窗口,且内容小于给定宽高:
scrollWidth
= 给定的宽度 + 其所有padding、margin、border
scrollHeight
= 给定的高度 + 其所有的padding、margin、border
给定宽高大于浏览器窗口,且内容大于给定宽高:
scrollWidth
= 内容宽度 + 其所有的padding、margin、border
scrollHeight
= 内容高度 + 其所有的`padding、margin、border
scrollLeft
和scrollTop
这对属性是可读写的,指的是当元素其中的内容超出其宽高的时候,元素被卷起来的宽度和高度
# Event对象的5种坐标
clientX和clientY,相对于浏览器(可视区左上角0,0)的坐标
screenX和screenY,相对于设备屏幕左上角(0,0)的坐标
offsetX和offsetY,相对于事件源左上角(0,0)的坐标
pageX和pageY,相对于整个网页左上角(0,0)的坐标
X和Y,本来是IE属性,相对于用CSS动态定位的最内层包容元素
2
3
4
5
# JQuery下各种宽高
width():元素的content区域宽度
height():元素的content区域高度
innerWidth():元素的content+padding区域宽度
innerHeight():元素的content+padding区域高度
outerWidth(Boolean):可选,默认表示元素的content+padding+border区域的宽度,如果为true表示元素的content+padding+border+margin区域的宽度
outerHeight(Boolean):可选,默认表示元素的content+padding+border区域的高度,如果为true表示元素的content+padding+border+margin区域的高度
scrollLeft():相对于水平滚动条左边的距离
scrollTop():相对于垂直滚动条上边的距离
offset():返回相对于document的当前坐标值,包含left、top值
position():返回相对于offsetParent的当前坐标值,包含left、top值
2
3
4
5
6
7
8
9
10