原生js獲取left值和top值的三種方法

更新時間：2017年08月02日 08:42:36 投稿：jingxian

下面小編就為大家?guī)硪黄鷍s獲取left值和top值的三種方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

在用js做動態(tài)效果時，通常需要獲取元素絕對定位中的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屬性值。

以上這篇原生js獲取left值和top值的三種方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

跨瀏覽器開發(fā)經(jīng)驗總結（四）怎么寫入剪貼板
讓你的操作剪切板的操作支持多瀏覽器，一般IE,Firefox
2010-05-05
用nodejs訪問ActiveX對象，以操作Access數(shù)據(jù)庫為例。
有人提問“如果用nodejs訪問sql server？” 找了找資料，發(fā)現(xiàn)有兩類解決方法，使用第三方nodejs插件
2011-12-12
一文教你學會用JS實現(xiàn)圖片懶加載功能
圖片懶加載是日常開發(fā)會經(jīng)常使用的一個功能,但是在日常中可能使用v-lazy便直接實現(xiàn)了圖片懶加載,但是本文將通過原生js來實現(xiàn)一下圖片懶加載的功能，感興趣的同學跟著小編一起來看看吧
2023-07-07
淺談js圖片前端預覽之filereader和window.URL.createObjectURL
下面小編就為大家?guī)硪黄獪\談js圖片前端預覽之filereader和window.URL.createObjectURL。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-06-06
javascript自然分類法算法實現(xiàn)代碼
這篇文章介紹了javascript自然分類法算法實現(xiàn)代碼，有需要的朋友可以參考一下
2013-10-10
js 函數(shù)的執(zhí)行環(huán)境和作用域鏈的深入解析
在js中對象的外在表現(xiàn)形式為函數(shù)。
2009-11-11
JS實現(xiàn)數(shù)組去重及數(shù)組內對象去重功能示例
這篇文章主要介紹了JS實現(xiàn)數(shù)組去重及數(shù)組內對象去重功能,結合實例形式分析了ES5與ES6兩種版本針對數(shù)組去重的相關操作技巧,需要的朋友可以參考下
2019-02-02
從柯里化分析JavaScript重要的高階函數(shù)實例
這篇文章主要為大家介紹了從柯里化分析JavaScript重要的高階函數(shù)實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-10-10
js讀取json的兩種常用方法示例介紹
js讀取json的方法或許很多，但常用的就那兩種，本文以示例代碼的方式為大家介紹下其具體的實現(xiàn)
2014-10-10
100多個基礎常用JS函數(shù)和語法集合大全
本文將介紹100多個基礎常用JS函數(shù)和語法，具有很好的參考價值，下面跟著小編一起來看下吧
2017-02-02