在用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屬性值。
<!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>