本篇文章為大家展示了jQuery中怎么獲取元素位置的接口，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

永福ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書未來(lái)市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)建站的ssl證書銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18980820575（備注：SSL證書合作）期待與您的合作！

jQuery中提供了獲取設(shè)置HTML元素位置的接口方法。如下

.offset()

.position()

.offsetParent()

.scrollTop()

.scrollLeft()

所有位置相關(guān)的代碼在項(xiàng)目的offset.js中，總共250行代碼。里面還有些未公開(kāi)的方法，如

getOffset()

getWindow()

jQuery.offset.bodyOffset()

jQuery.offset.setOffset()

它們之間的關(guān)系如下

從圖中可以看到兩個(gè)重要的函數(shù).offset()和.position()都依賴于私有的getOffset()。

.position()還依賴于.offsetParent()。offsetParent通過(guò)while循環(huán)獲取最近的定位父元素（position為非static值）。

getOffset()函數(shù)根據(jù)瀏覽器是否支持getBoundingClientRect得來(lái)。如果支持則使用getBoundingClientRect，否則使用while循環(huán)不斷計(jì)算得出位置值。

getBoundingClientRect最早是IE中實(shí)現(xiàn)的，后主流瀏覽器都實(shí)現(xiàn)了它。因此后面的else判斷基本上用不上，jQuery可考慮去掉該段代碼。

需要注意下.offset()和.position()的區(qū)別

.offset()   相對(duì)于document（視口）計(jì)算的

.position() 相對(duì)于其最近的 定位父元素

此外，.offset()傳入一個(gè)對(duì)象或函數(shù)時(shí)可以設(shè)置元素的位置（setter），而.position()則僅是獲取位置（getter）。

.offset()作為getter時(shí)，獲取dispaly:none的元素top，left都將是零。

.offset()作為setter時(shí)，如果沒(méi)有元素的position（此時(shí)值為static），那么.offset()方法會(huì)將其設(shè)置為“relative”以相對(duì)于視口進(jìn)行重新定位。如下

1 // set position first, in-case top/left are set even on static elem  2 if ( position === "static" ) {  3     elem.style.position = "relative";  4 }

上述內(nèi)容就是jQuery中怎么獲取元素位置的接口，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。