1.HTML元素
html
元素是网页的根元素,document.documentElement
就指向这个元素。
1.1 clientWidth, clientHeight
这两个属性返回视口(viewport)的大小,单位为像素。所谓“视口”,是指用户当前能够看见的那部分网页的大小。document.documentElement.clientWidth
和document.documentElement.clientHeight
,基本上与window.innerWidth
和window.innerHeight
同义。但是前者不将滚动条计算在内(很显然,滚动条和工具栏会减小视口大小),而后者包括了滚动条的高度和宽度。
1.2 offsetWidth,offsetHeight
这两个属性返回html元素的宽度和高度,即网页的总宽度和总高度。
2.Element对象
2.1 clientHerght, clientWidth, clientLeft, clientTop
这几个属性与元素节点可见区域的坐标相关。如果一个元素是滚动的,clientWidth和clientHeight只计算它的可见部分的宽度和高度。
(1) clientHeight
clientHeight属性返回元素节点的可见高度,包括padding、但不包括水平滚动条、边框和margin的高度,单位为像素。
(2) clientWidth
clientWidth属性等于网页元素的可见宽度,即包括padding、但不包括垂直滚动条(如果有的话)、边框和margin的宽度,单位为像素。
(3) clientTop
clientTop属性表示一个元素顶部边框的宽度,不包括顶部的margin和padding。单位为像素。
(4) clientLeft
clientLeft属性表示一个元素左边边框的宽度,不包括左侧的margin和padding。单位为像素。
2.2 scrollHeight, scrollWidth, scrollLeft, scrollTop
这几个属性与元素节点占据的总区域的坐标相关。
(1) scrollHeight
scrollHeight属性返回指定元素的总高度,包括由于溢出而无法展示在网页的不可见部分。如果一个元素是可以滚动的,则scrollHeight 包括整个元素的高度,不管是否存在垂直滚动条。scrollHeight属性包括padding,但不包括border和margin。该属性为只读属 性。
(2) scrollWidth
scrollWidth属性返回元素的总宽度,包括由于溢出容器而无法显示在网页上的那部分宽度,不管是否存在水平滚动条。该属性是只读属性。
(3) scrollTop
scrollTop属性设置或返回垂直滚动条向下滚动的像素数量。它的值等于元素的顶部与其可见的最高位置之间的距离。对于那些没有滚动条或不需要滚动的元素,该属性等于0。该属性是可读写属性,设置该属性的值,会导致浏览器将指定元素自动滚动到相应位置。
(4) scrollLeft
scrollLeft属性设置或返回水平滚动条向右侧滚动的像素数量。它的值等于元素的最左边与其可见的最左侧之间的距离。对于那些没有滚动条或不需要滚动的元素,该属性等于0。该属性是可读写属性,设置该属性的值,会导致浏览器将指定元素自动滚动到相应的位置。
3.window对象的大小和位置
3.1 window.screenX, window.screenY
window.screenX
和window.screenY
属性,返回浏览器窗口左上角相对于当前屏幕左上角((0, 0)
)的水平距离和垂直距离,单位为像素。
3.2 window.innerHeight, window.innerWidth
window.innerHeight
和window.innerWidth
属性,返回网页在当前窗口中可见部分的高度和宽度,即“视口”(viewport),单位为像素。
当用户放大网页的时候(比如将网页从100%的大小放大为200%),这两个属性会变小。因为这时网页的像素大小不变,只是每个像素占据的屏幕空间变大了,因为可见部分(视口)就变小了。
这两个属性值包括滚动条的高度和宽度。
3.3 window.outerHeight, winodw.outerWidth
window.outerHeight
和window.outerWidth
属性返回浏览器窗口的高度和宽度,包括浏览器菜单和边框,单位为像素。
3.4 window.pageXOffset, window.pageYOffset
window.pageXOffset
属性返回页面的水平滚动距离,window.pageYOffset
属性返回页面的垂直滚动距离,单位都为像素。