原生js获取left值和top值

在用js做动态效果时，通常需要获取元素绝对定位中的left和top属性值。比如做一个碰撞广告，就要不停的获取元素的top和left属性值。

需要注意的事：取值的元素必须要设置position:absolute绝对定位属性，才能取的到left值。

第一种方法，比较简单，就是直接通过obj.style.left和obj.style.top，但是有局限性，这种获取的方法只能获取到行内样式的left和top的属性值，不能获取到style标签和link 外部引用的left和top属性值。

第二种方法 只读，可以获取所有style样式，存在兼容性问题，在标准浏览器中可以通过window.getComputedStyle(对象，null).left方法来获取元素的left和top的属性值。而在IE浏览器上则是采用obj.currentStyle.left方法来获取属性值。

 第三种方法，使用obj.offsetLeft来获取对象的left属性值,用obj.offsetTop来获取对象的top属性值。

 

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46

<! DOCTYPE  html> < html  lang="en"> < head >      < meta  charset="UTF-8">      < title >Document</ title >      < style  type="text/css">          *{              margin: 0;padding: 0;          }          #boxs{              width: 200px;height: 200px;border: 1px solid red;position: absolute;top: 0;left:10px;          }      </ style > </ head > < body >      < div  id="boxs">这是一个盒子</ div >      < div  id="ctns" style="width: 500px;height: 300px;border: 1px solid blue;position: absolute;top: 210px;left:20px;">这是第二个</ div > </ body > < script  type="text/javascript">      // 1，第一种方法 obj.style.left 只能获取行内样式的left值      var boxs = document.getElementById('boxs');      var ctns = document.getElementById('ctns');      var a = boxs.style.left;      console.log(a); //值是空，没有        var a2 = ctns.style.left;      console.log(a2);    //值是20px          // 2，第二种方法，获取所有类型样式值，要写兼容      //支持w3c规范的浏览器      var b2= window.getComputedStyle(boxs).left;      console.log(b2);    //10px      //兼容IE9以下写法      var b3 = window.getComputedStyle? window.getComputedStyle(boxs).left : boxs.currentStyle.left;      console.log(b3);    //10px        // 3，第三种方法 使用obj.offsetLeft      var c = boxs.offsetLeft;      var c2 = ctns.offsetLeft;      console.log(c);     //值是10      console.log(c2);    //值是20     </ script > </ html >

转载来自：https://www.cnblogs.com/yizhilin/p/7269124.html