js怎么获取一个元素与屏幕右边的距离_js如何获取div（ul li）离屏幕上下左右边距离（长度）...

在网页中移到元素div(或 ul li)，常常需要获取元素div离屏幕上下左右的距离，这样可以知道元素处在屏幕中的位置，以控制元素的移动。

获取元素div的长度或高度，可以用 js 获取元素div的width或height属性得到，但元素没有距离屏幕上下左右的属性，应该如何获取元素div(ul li)离屏幕上下左右边距离(长度)？javascript 有一个用 getBoundingClientRect()方法，这个方法有上下左右四个属性，它们正是离幕上下左右边距离，通过它可以获取到div(ul li)离屏幕上下左右边距离。

js如何获取div(ul li)离屏幕上下左右边距离(长度)实例

html代码：

js如何获取div(ul li)离屏幕上下左右边距离(长度)

CSS代码：

.div{ margin:80px 0px; position:relative; border:1px solid #787878; width:500px; height:30px; line-height:30px;}

javascript代码：

function getDivTopLength(obj) {

var div = document.getElementById(obj);

var topLength = div.getBoundingClientRect().top; //div离屏幕上边距离(长度)

var bottomLength = div.getBoundingClientRect().bottom; //div离屏幕下边距离(长度)

var leftLength = div.getBoundingClientRect().left; //div离屏幕左边距离(长度)

var rightLength = div.getBoundingClientRect().right; //div离屏幕右边距离(长度)

return "topLength=" + topLength + "；bottomLength=" + bottomLength + "；leftLength=" + leftLength + "；rightLength=" + rightLength;

}

document.write(getDivTopLength("divId"));

输出结果：topLength=80；bottomLength=112；leftLength=8；rightLength=510

由于CSS把 div 的位置定义为相对(position:relative)，所以 div 在网页中的位置不同，输出结果不一样。

以上举例了求 div 离屏幕上下左右边距离，js getDivTopLength方法把要求元素离屏幕上下左右边距离定义为参数，所以只要把具体元素传递给它就能求出其离屏幕上下左右边距离，因此求 ul li 离屏幕上下左右边距离，只需把相应的 id 传给 getDivTopLength方法就可以求出。