用Javascript获取页面元素的位置

用Javascript获取页面元素的位置 学习笔记整理

网页概念

• 网页大小 —— 通常情况由内容和 CSS 样式表决定。
• 浏览器窗口（viewport）大小 —— 在浏览器窗口中看到的网页面积

显然，如果网页的内容能够在浏览器窗口中全部显示（也就是不出现滚动条），那么网页的大小和浏览器窗口的大小是相等的。如果不能全部显示，则滚动浏览器窗口，可以显示出网页的各个部分。

网页视窗大小概念

• clientHeight 和 clientWidth，它们指元素 (element) 的内容部分再加上 padding 所占据的**视觉面积**（重点：视觉面积），不包括 border 和滚动条占用的空间。

const isQuirks = () => document.compatMode == "BackCompat" ? true : false;
const getViewport = () => isQuirks() 
                          ? {width: document.body.clientWidth, height: document.body.clientHeight} 
                          : {width: document.documentElement.clientWidth, height: document.documentElement.clientHeight};
const clientSize = getViewport();

1）这个函数必须在页面加载完成后才能运行，否则document对象还没生成，浏览器会报错。
2）大多数情况下，都是document.documentElement.clientWidth返回正确值。但是，在IE6的quirks模式中，document.body.clientWidth返回正确的值，因此函数中加入了对文档模式的判断。
3）clientWidth和clientHeight都是只读属性，不能对它们赋值。

网页大小概念

• scrollHeight 和 scrollWidth，它们指包含滚动条在内的元素大小。

const isQuirks = () => document.compatMode == "BackCompat" ? true : false;
const getPagearea = () => isQuirks() 
                          ? {width: Math.max(document.body.clientWidth,
                                             document.body.scrollWidth ), height: Math.max(document.body.clientHeight,
                                                                                           document.body.scrollHeight )} 
                          : {width: Math.max(document.documentElement.clientWidth,
                                             document.documentElement.scrollWidth ), height: Math.max(document.documentElement.clientHeight,
                                                                                                     document.documentElement.scrollHeight )};
const pageSize = getPagearea();

注意：如果网页内容能够在浏览器窗口中全部显示，不出现滚动条，那么网页的 clientWidth 和 scrollWidth 应该相等。但是实际上，不同浏览器有不同的处理，这两个值未必相等。所以，我们需要取它们之中较大的那个值。

网页元素的绝对位置

• 网页元素的绝对位置 - 指该元素左上角相对于整个网页左上角的坐标。这个位置通过计算得到。
• offsetTop 和 offsetLeft 属性，表示该元素的左上角与父元素（offsetParent）左上角的距离。只需要将这两个值进行累加，能够得到该元素的绝对坐标。

网页元素的相对位置

• 网页元素的相对位置 - 指元素左上角相对于浏览器窗口左上角的坐标。

通过绝对坐标减去滚动条滚动的距离就可以得到相对位置坐标。

• document 的 scrollTop，滚动条滚动的垂直距离
• document 的 scrollLeft，滚动条滚动的水平距离

获取元素位置的快速方法

使用 Element.getBoundingClientRect():

The Element.getBoundingClientRect() method returns the size of an element and its position relative to the viewport.

rectObject = object.getBoundingClientRect();

rectObject = {
    bottom: 相对位置底边
    top:    相对位置顶边
    right:  相对位置右边
    left:   相对位置左边
    width:  元素宽度
    height: 元素高度
}

Browser compatibility

Feature	Chrome	Edge	Firefox	IE	Opera	Safari
Basic support	1.0 [1]	(Yes)	3.0 (1.9) [3]	4.0 [2]	(Yes)	4.0
width/height	(Yes)	(Yes)	3.5 (1.9.1) [3]	9	(Yes)	(Yes)