我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

在上一篇文章里面，苏南大叔描述了如何通过js获得元素的各种尺寸信息。在本文中，苏南大叔将使用类似的方法，获得页面元素的各种位置信息。其中，位置信息，大多数情况下只有left和top的信息，而没有bottom和right信息。在css中使用bottom和right进行定位的时候比较少（特例是fixed的元素）。

苏南大叔：JavaScript如何判断页面元素的上下左右位置信息? - 页面元素上下左右信息
JavaScript如何判断页面元素的上下左右位置信息?（图3-1）

大家好，这里是苏南大叔的程序如此灵动博客，记录苏南大叔和计算机代码的故事。本文描述获得元素位置信息的几种方式。测试环境：谷歌浏览器@111.0.5563.111。

龙套范例

这里还是先显示一下本文的龙套演员，例子改编自下面几篇文章：

<div>盒子模型360*60</div>
<div id="t0" style="right: 2px; bottom: 3px;">fixed的盒子</div>
<div id="t1">t1,border-box</div>
<div id="t2">t2,content-box</div>
<style>
  div {
    width: 360px !important;
    height: 60px !important;
    line-height: 60px;
    text-align: center;
    vertical-align: middle;
    margin: 7px;
    background-color: blue;
    color: #ffffff;
    clear: both;
    overflow: auto;
  }
  div#t0 {
    position: fixed;
    border: 8px solid gray;
  }
  div#t1 {
    box-sizing: border-box;
    padding: 15px;
    border: 25px solid gray;
  }
  div#t2 {
    box-sizing: content-box;
    padding: 15px;
    border: 5px solid gray;
  }
  body {
    padding: 20px;
    margin: 11px;
  }
</style>
HTML

这里除了怪异盒子和标准盒子两个，还增加了一个fixed的盒子，位置在右下角位置。

苏南大叔：JavaScript如何判断页面元素的上下左右位置信息? - 测试样本
JavaScript如何判断页面元素的上下左右位置信息?（图3-2）

基础信息

这里依然先列出相关的基础数据:

方法t0(fixed)t1(怪异)t2(标准)
getComputedStyle(document.querySelector('#-'), null).margin7px7px7px
getComputedStyle(document.querySelector('#-'), null).padding0px15px15px
getComputedStyle(document.querySelector('#-'), null).borderWidth8px25px5px

同时，本文涉及到了body的数据：

数据值
getComputedStyle(document.querySelector('body'), null).margin11px
getComputedStyle(document.querySelector('body'), null).padding20px

.style.top、.style.bottom

这个.style.系列，依然是不主动在元素的style属性里面定义的话，就并不会显示，很好理解。所以理所应当的只有fixed的盒子被定义了，所以也只有这个盒子有相关信息显示。

方法t0(fixed)t1(怪异盒子)t2(标准盒子)
-.style.left空空空
-.style.top空空空
-.style.right2px空空
-.style.bottom3px空空

.clientLeft和.clientTop

没有.clientRight，没有.clientBottom。

方法t0(fixed)t1(怪异盒子)t2(标准盒子)
-.clientLeft8255
-.clientTop8255

client值得是蓝色的区域，它的left和top都指的是border。只不过因为测量的都是左侧或者上方这种单方向的。所以支取一条边的宽度。所以，结论是：

  • .clientLeft=.BorderLeftWidth
  • .clientTop=.BorderTopWidth

.offsetLeft和.offsetTop

没有.offsetRight，没有.offsetBottom。

方法t0(fixed)t1(怪异盒子)t2(标准盒子)
-.offsetLeft10383838
-.offsetTop343105192

这个是灰色区域（蓝色区域的外部灰边框，不包括边框）距离浏览器最最边上的距离。
对于普通的元素，实际上等于 .margin(父辈的border)*N + body.margin + body.padding
对于本文中的fixed的元素，实际上
.offsetLeft = 总宽度 - getComputedStyle.right-margin。

scrollLeft和scrollTop

scroll涉及到了滚动，那么对于overflow:hidden或者auto之类的元素才有意义。所以，本文中的例子，请关注overflow:auto的诡异盒子模型t1。测试代码前，可以先拖动一下里面的滚动条。

方法t0(fixed)t1(怪异盒子)t2(标准盒子)
-.scrollLeft000
-.scrollTop0400

getComputedStyle(document.querySelector('#-'), null).left

方法t0(fixed)t1(怪异)t2(标准)
getComputedStyle(document.querySelector('#-'), null).left1031pxautoauto
getComputedStyle(document.querySelector('#-'), null).top336pxautoauto
getComputedStyle(document.querySelector('#-'), null).right2pxautoauto
getComputedStyle(document.querySelector('#-'), null).bottom3pxautoauto

很明显，这个测试值只有fixed盒子有意义，其它的盒子取值都是auto。而且这个取值和对应的offsetLeft差值就是个单边margin。
offsetLeft包含左侧的border，getComputedStyle().left不包含左侧的margin。

jq.offset().left和jq.offset().top

jq.offset().left取值完全等于.offsetLeft。没有jq.offset().right，没有jq.offset().bottom。

方法t0(fixed)t1(怪异盒子)t2(标准盒子)
jq.offset().left10383838
jq.offset().top343105192

这个是灰色区域（蓝色区域的外部灰边框左上角）距离浏览器最最边上的距离。
对于普通的元素，实际上等于 .margin(父辈的border)*N + body.margin + body.padding
对于本文中的fixed的元素，实际上
.offsetLeft = 总宽度 - getComputedStyle.right-margin。

jq.position().left和jq.position().top

没有jq.position().right，没有jq.position().bottom。

方法t0(fixed)t1(怪异盒子)t2(标准盒子)
jq.position().left10313131
jq.position().top33698185
  • 和jq.offset().left和jq.offset().top对比的话，就差个对应的单边margin。
  • jq.position()包含margin在范围内，而jq.offset()不包含margin在范围内。

测试代码

本文测试代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>盒子模型360*60</div>
    <div id="t0" style="right: 2px; bottom: 3px">fixed的盒子</div>
    <div id="t1">t1,border-box</div>
    <div id="t2">t2,content-box</div>
    <style>
      div {
        width: 360px !important;
        height: 60px !important;
        line-height: 60px;
        text-align: center;
        vertical-align: middle;
        margin: 7px;
        background-color: blue;
        color: #ffffff;
        clear: both;
        overflow: auto;
      }
      div#t0 {
        position: fixed;
        border: 8px solid gray;
      }
      div#t1 {
        box-sizing: border-box;
        padding: 15px;
        border: 25px solid gray;
      }
      div#t2 {
        box-sizing: content-box;
        padding: 15px;
        border: 5px solid gray;
      }
      body {
        padding: 20px;
        margin: 11px;
      }
    </style>
    <button onclick="javascript:check()">检测一下</button>
    <table>
      <tr>
        <th>方法</th>
        <th>t0</th>
        <th>t1</th>
        <th>t2</th>
      </tr>
    </table>
    <style>
      table {
        width: 100%;
        border-collapse: collapse;
        margin: 0 auto;
        text-align: center;
      }
      table td,
      table th {
        border: 1px solid #cad9ea;
        color: #666;
        height: 30px;
      }
      table th {
        background-color: #cce8eb;
        width: 100px;
      }
      table tr:nth-child(odd) {
        background: #fff;
      }
      table tr:nth-child(even) {
        background: #f5fafa;
      }
    </style>
    <script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
    <script>
      function check() {
        var tabObj = document.getElementsByTagName("table")[0]; //获取添加数据的表格
        var rowsNum = tabObj.rows.length; //获取当前行数
        // var colsNum = tabObj.rows[rowsNum - 1].cells.length;    //获取行的列数
        var infos = [
          "getComputedStyle(document.querySelector('#obj'), null).margin",
          "getComputedStyle(document.querySelector('#obj'), null).padding",
          "getComputedStyle(document.querySelector('#obj'), null).borderWidth",
          "obj.style.left",
          "obj.style.top",
          "obj.style.right",
          "obj.style.bottom",
          "obj.clientLeft",
          "obj.clientTop",
          // "obj.clientRight",
          // "obj.clientBottom",
          "obj.offsetLeft",
          "obj.offsetTop",
          // "obj.offsetRight",
          // "obj.offsetBottom",
          "obj.scrollLeft",
          "obj.scrollTop",
          // "obj.scrollRight",
          // "obj.scrollBottom",
          "getComputedStyle(document.querySelector('#obj'), null).left",
          "getComputedStyle(document.querySelector('#obj'), null).top",
          "getComputedStyle(document.querySelector('#obj'), null).right",
          "getComputedStyle(document.querySelector('#obj'), null).bottom",
          // "getComputedStyle(document.querySelector('#obj'), null).clientLeft",
          // "getComputedStyle(document.querySelector('#obj'), null).clientTop",
          // "getComputedStyle(document.querySelector('#obj'), null).offsetLeft",
          // "getComputedStyle(document.querySelector('#obj'), null).offsetTop",
          "$('#obj').offset().left",
          "$('#obj').offset().top",
          "$('#obj').position().left",
          "$('#obj').position().top",
          // "$('#obj').position().right",
          // "$('#obj').position().bottom",
          // "$('#obj').offset().right",
          // "$('#obj').offset().bottom",
          // "$('#obj').client().left",
          // "$('#obj').client().top",
          // "$('#obj').scroll().left",
          // "$('#obj').scroll().top",
        ];
        var objs = ["t0", "t1", "t2"];
        for (var j = 0; j < infos.length; j++) {
          var addRow = tabObj.insertRow(rowsNum);
          var addRow0 = addRow.insertCell(0);
          var js = infos[j].replace("obj", "-");
          addRow0.innerHTML = js;
          // console.log(js);
          for (var i = 0; i < objs.length; i++) {
            var addRow1 = addRow.insertCell(i + 1);
            var js2 = infos[j].replace("obj", objs[i]);
            addRow1.innerHTML = new Function("return " + js2)();
          }
          rowsNum++;
        }
      }
    </script>
  </body>
</html>
HTML

苏南大叔：JavaScript如何判断页面元素的上下左右位置信息? - 运行结果
JavaScript如何判断页面元素的上下左右位置信息?（图3-3）

相关文章

总结

更多苏南大叔写的js相关经验文章，请点击：

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。

 【福利】 腾讯云最新爆款活动！1核2G云服务器首年50元！

 【源码】本文代码片段及相关软件，请点此获取更多信息

 【绝密】秘籍文章入口，仅传授于有缘之人   js