获取标签元素在整个页面(包含滚动条)中的相对位置的方法

最新推荐文章于 2023-09-16 23:50:14 发布

原创最新推荐文章于 2023-09-16 23:50:14 发布 · 923 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html #html5

本文介绍了如何在JavaScript中获取网页元素的相对位置，包括使用offsetLeft/offsetTop与滚动条滚动距离的计算，以及利用getBoundingClientRect()方法的快速方法，特别提到了不同浏览器对这些方法的支持情况。

1、获取网页元素的相对位置的普通方法

有了绝对位置以后，获得相对位置就很容易了，只要将绝对坐标减去页面的滚动条滚动的距离就可以了。滚动条滚动的垂直距离，是document对象的scrollTop属性；滚动条滚动的水平距离是document对象的scrollLeft属性。

scrollTop和scrollLeft属性是可以赋值的，并且会立即自动滚动网页到相应位置，因此可以利用它们改变网页元素的相对位置。

另外，element.scrollIntoView()方法也有类似作用，可以使网页元素出现在浏览器窗口的左上角。

    // 获取left
    function getElementViewLeft(element){
　　　　var actualLeft = element.offsetLeft;
　　　　var current = element.offsetParent;

　　　　while (current !== null){
　　　　　　actualLeft += current.offsetLeft;
　　　　　　current = current.offsetParent;
　　　　}

　　　　if (document.compatMode == "BackCompat"){
　　　　　　var elementScrollLeft = document.body.scrollLeft;
　　　　} else {
　　　　　　var elementScrollLeft = document.documentElement.scrollLeft; 
　　　　}

　　　　return actualLeft - elementScrollLeft;
　　}

    // 获取top
    function getElementViewTop(element){
　　　　var actualTop = element.offsetTop;
　　　　var current = element.offsetParent;

　　　　while (current !== null){
　　　　　　actualTop += current. offsetTop;
　　　　　　current = current.offsetParent;
　　　　}

　　　　 if (document.compatMode == "BackCompat"){
　　　　　　var elementScrollTop = document.body.scrollTop;
　　　　} else {
　　　　　　var elementScrollTop = document.documentElement.scrollTop; 
　　　　}

　　　　return actualTop - elementScrollTop;
　　}

2、获取元素位置的快速方法

使用getBoundingClientRect()方法。它返回一个对象，其中包含了left、right、top、bottom四个属性，分别对应了该元素的左上角和右下角相对于浏览器窗口（viewport）左上角的距离。

所以，网页元素的相对位置就是

var X= this.getBoundingClientRect().left;

var Y =this.getBoundingClientRect().top;

再加上滚动距离，就可以得到绝对位置

var X= this.getBoundingClientRect().left + document.documentElement.scrollLeft;

var Y = this.getBoundingClientRect().top + document.documentElement.scrollTop;

目前，IE、Firefox 3.0+、Opera 9.5+都支持该方法，而Firefox 2.x、Safari、Chrome、Konqueror不支持。