首页 > 代码库 > 总结与元素坐标相关的属性(再也搞不混了)

总结与元素坐标相关的属性(再也搞不混了)

 
与元素坐标相关属性:
 

1.HTML元素

html元素是网页的根元素,document.documentElement就指向这个元素。

1.1 clientWidth, clientHeight

这两个属性返回视口(viewport)的大小,单位为像素。所谓“视口”,是指用户当前能够看见的那部分网页的大小。document.documentElement.clientWidthdocument.documentElement.clientHeight,基本上与window.innerWidthwindow.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.screenXwindow.screenY属性,返回浏览器窗口左上角相对于当前屏幕左上角((0, 0))的水平距离和垂直距离,单位为像素。

3.2 window.innerHeight, window.innerWidth

window.innerHeightwindow.innerWidth属性,返回网页在当前窗口中可见部分的高度和宽度,即“视口”(viewport),单位为像素。

当用户放大网页的时候(比如将网页从100%的大小放大为200%),这两个属性会变小。因为这时网页的像素大小不变,只是每个像素占据的屏幕空间变大了,因为可见部分(视口)就变小了。

这两个属性值包括滚动条的高度和宽度。

3.3 window.outerHeight, winodw.outerWidth

window.outerHeightwindow.outerWidth属性返回浏览器窗口的高度和宽度,包括浏览器菜单和边框,单位为像素。

3.4 window.pageXOffset, window.pageYOffset

window.pageXOffset属性返回页面的水平滚动距离,window.pageYOffset属性返回页面的垂直滚动距离,单位都为像素。

总结与元素坐标相关的属性(再也搞不混了)