原生js獲取left值和top值的三種方法
在用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屬性值。
以上這篇原生js獲取left值和top值的三種方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
- js瀏覽器滾動(dòng)條卷去的高度scrolltop(實(shí)例講解)
- Javascript實(shí)現(xiàn)的StopWatch功能示例
- JavaScript限制在客戶區(qū)可見(jiàn)范圍的拖拽(解決scrollLeft和scrollTop的問(wèn)題)（2）
- js中scrollTop()方法和scroll()方法用法示例
- 深入淺析JavaScript中的scrollTop
- js+css實(shí)現(xiàn)回到頂部按鈕（back to top）
- 使用堆實(shí)現(xiàn)Top K算法（JS實(shí)現(xiàn)）
- 解決js頁(yè)面滾動(dòng)效果scrollTop在FireFox與Chrome瀏覽器間的兼容問(wèn)題的方法
- js中不同的height, top的區(qū)別對(duì)比
- javascript獲取圖片的top N主色值方法詳解
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于Javascript執(zhí)行上下文順序的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
JavaScript編寫(xiě)簡(jiǎn)單的計(jì)算器
這篇文章主要介紹了JavaScript如何編寫(xiě)簡(jiǎn)單的計(jì)算器，功能很簡(jiǎn)單，可以實(shí)現(xiàn)加減乘除功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2015-11-11
不間斷滾動(dòng)JS打包類，基本可以實(shí)現(xiàn)所有的滾動(dòng)效果，太強(qiáng)了
不間斷滾動(dòng)JS打包類，基本可以實(shí)現(xiàn)所有的滾動(dòng)效果，太強(qiáng)了...2007-12-12
JavaScript基于對(duì)象方法實(shí)現(xiàn)數(shù)組去重及排序操作示例
這篇文章主要介紹了JavaScript基于對(duì)象方法實(shí)現(xiàn)數(shù)組去重及排序操作,涉及javascript基于對(duì)象方法的數(shù)組遍歷、比較、去重、排序等相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
詳解JavaScript運(yùn)算符中==和===的區(qū)別
在JavaScript中==運(yùn)算符和===運(yùn)算符是經(jīng)常遇到的，那么二者有哪些區(qū)別呢，本文就來(lái)和大家進(jìn)行簡(jiǎn)單的討論，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)學(xué)習(xí)2023-05-05
微信小程序tabBar組件切換與下拉刷新實(shí)現(xiàn)詳解
tabBar相對(duì)而言用的還是比較多的,但是用起來(lái)并沒(méi)有難,下面這篇文章主要給大家介紹了關(guān)于微信小程序全局配置之tabBar的相關(guān)資料,文中通過(guò)圖文以及示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
選擇與取消選擇不錯(cuò)的應(yīng)用 js...2006-12-12
這篇文章主要介紹了微信小程序人臉識(shí)別功能，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要為大家詳細(xì)介紹了javascript瀑布流式圖片懶加載實(shí)例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-02-02
避免 showModalDialog 彈出新窗體的原因分析,一般情況下需要返回值用window.open.2010-05-05