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代码：

<div id="divId" class="div">js如何获取div（ul li）离屏幕上下左右边距离（长度）</div>

CSS代码：

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

javascript代码：

<script type="text/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"));
</script>

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

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

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