[原生js獲取left值和top值]
---------------------------------(https://www.cnblogs.com/yizhilin/p/7269124.html)
在用js做動(dòng)態(tài)效果時(shí)滓鸠，通常需要獲取元素絕對(duì)定位中的left和top屬性值褐筛。比如做一個(gè)碰撞廣告，就要不停的獲取元素的top和left屬性值。
需要注意的事：取值的元素必須要設(shè)置position:absolute絕對(duì)定位屬性腹缩，才能取的到left值。
第一種方法呜师，比較簡(jiǎn)單框杜，就是直接通過(guò)obj.style.left和obj.style.top，但是有局限性踱蠢，這種獲取的方法只能獲取到行內(nèi)樣式的left和top的屬性值火欧，不能獲取到style標(biāo)簽和link 外部引用的left和top屬性值。
第二種方法 茎截，只讀苇侵，可以獲取所有style樣式，存在兼容性問(wèn)題企锌，在標(biāo)準(zhǔn)瀏覽器中可以通過(guò)window.getComputedStyle(對(duì)象榆浓，null).left方法來(lái)獲取元素的left和top的屬性值。而在IE瀏覽器上則是采用obj.currentStyle.left方法來(lái)獲取屬性值撕攒。
第三種方法陡鹃，使用obj.offsetLeft來(lái)獲取對(duì)象的left屬性值,用obj.offsetTop來(lái)獲取對(duì)象的top屬性值。
栗子：
<script type="text/javascript">
// 1抖坪，第一種方法 obj.style.left 只能獲取行內(nèi)樣式的left值
var boxs = document.getElementById('boxs');
var ctns = document.getElementById('ctns');
var a = boxs.style.left;
console.log(a); //值是空萍鲸，沒(méi)有
var a2 = ctns.style.left;
console.log(a2); //值是20px
// 2，第二種方法擦俐，獲取所有類(lèi)型樣式值猿推，要寫(xiě)兼容
//支持w3c規(guī)范的瀏覽器
var b2= window.getComputedStyle(boxs).left;
console.log(b2); //10px
//兼容IE9以下寫(xiě)法
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>
