JavaScript获取DOM元素位置和尺寸

Posted 2020-08-06

每一个html元素都有下列属性：

offsetWidth	clientWidth	scrollWidth
offsetHeight	clientHeight	scrollHeight
offsetLeft	clientLeft	scrollLeft
offsetTop	clientTop	scrollTop

首先，要理解HTML元素的实际内容可能会比分配给这个元素容纳内容的盒子要大，比如说一段很长的文字，把它放在了一个固定长宽的盒子里面，因此可能会出现滚动条。

1.clientHeight和clientWidth用于描述元素的内尺寸，也就是元素内容+内边距大小，注意这个元素内容是指设定定的这个元素的大小，例如width=100px,padding=2px,那么这个大小就是104px。这个是不包括边框（IE实际包括）、外边距和滚动条部分。

2.offsetHeight和offsetWidth是指元素的内容+内边距+边框，但是不包括外边距和滚动条的。这两个特性只和自身有关，与周围的元素（父元素和子元素无关）

MDN对offsetWidth的描述实际上是

Returns the layout width of an element.

Typically, an element‘s offsetWidth is a measurement which includes the element borders, the element horizontal padding, the element vertical scrollbar (if present, if rendered) and the element CSS width.

但是即使加上了水平或垂直滚动条，offsetWidth和offsetHeight的值是不会更改的，这是因为浏览器渲染时把滚动条的宽度算在元素本身里面了。

3.scrollWidth和scrollHeight是元素的内容+内边距+溢出的尺寸，如果内容正好和内容区域匹配没有溢出的话，那么这个大小就是clientWidth和clientHeight一致。

 

 

4.clientTop和clientLeft返回内边距的边缘和边框的外边缘之间的水平和垂直距离，也就是上、左边框的宽度

5.offsetTop和offsetLeft返回的是该元素的左上角（border左上角靠近margin那个角）距离offsetParent的左上角（border左上角靠近padding那个角）的距离。

 offsetParent情况分为两种：

（1）该元素的父级元素的都没有CSS定位（position为absolute或relative），那么offsetParent为body

      在IE8/9/10及Chrome中，offsetLeft = (body的margin-left)+(body的border-width)+(body的padding-left)+(当前元素的margin-left)。

　　在FireFox中，offsetLeft = (body的margin-left)+(body的padding-left)+(当前元素的margin-left)。

（2）该元素的父级元素中有CSS定位的，offset选择最近的父级元素

　　offsetLeft=(offsetParent的padding-left)+(中间元素的offsetWidth)+(当前元素的margin-left)。

　　offsetTop=(offsetParent的padding-top)+(中间元素的offsetHeight)+(当前元素的margin-top)。

6.scrollLeft和scrollTop是指元素滚动条的位置，它们是可写的。

 

 

相对于文档和视口的坐标

当计算DOM元素位置也就是坐标的时候，会涉及到两种坐标系，文档坐标和视口坐标

经常使用的document就是整个页面部分，不仅仅是窗口可见部分，还包括因为窗口大小限制而出现的滚动条部分，他的左上角就是所谓的相对于文档坐标的原点。

视口则是显示文档内容的浏览器的一部分，它不包括浏览器外壳（菜单、工具栏、状态栏等），也就是当前窗口显示的页面部分，不包括滚动条。

如果文档比视口小，说明没有出现滚动条，文档左上角和视口左上角相同，一般来说在将两个坐标系之间切换，需要加上或者减去滚动的偏移量。

window.pageXoffset：整数只读属性，表示X轴滚动条向右滚动的像素数（表示文档向右滚动过的像素数）。IE不支持该属性，采用body.scrollLeft属性替代。

window.innerheight:只读属性，声明了窗口的文档显示区的高度和宽度，不包括菜单栏、工具栏以及滚动条等的高度。IE不支持该属性，可以采用document.documentElemen或者document.body的clientWidth和clientHeight属性作为替代。

window.screenLeft只读整数。声明了窗口的左上角在屏幕上的的 x 坐标和 y 坐标。IE、Safari 和 Opera 支持 screenLeft 和 screenTop，而 Firefox 和 Safari 支持 screenX 和 screenY。

 

 

 

参考：http://www.cnblogs.com/jscode/archive/2012/09/03/2669299.html

http://www.cnblogs.com/dolphinX/archive/2012/11/19/2777756.html