Javascript拖拽系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight屬性
圖二:在IETester中對(duì)IE 8 Beta 1的測(cè)試結(jié)果
注:IETester是一款非常不錯(cuò)的免費(fèi)網(wǎng)頁測(cè)試工具,可以代表IE的各個(gè)版本來渲染網(wǎng)頁。最新版本0.2.3可以在其官方網(wǎng)站http://www.my-debugbar.com/wiki/IETester/HomePage 下載。個(gè)人認(rèn)為每一個(gè)WEB開發(fā)者都應(yīng)該擁有一個(gè)。
仍然需要注意的是,如果在一個(gè)行內(nèi)標(biāo)簽(作為offsetParent)內(nèi)嵌入一個(gè)標(biāo)簽(作為當(dāng)前元素),類此如下代碼:
<span id="parent">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<div id="sonObj">測(cè)試OffsetParent屬性</div></span>
將引起混亂,因?yàn)楦鱾€(gè)瀏覽器的渲染各不相同(WebKit內(nèi)核瀏覽器將會(huì)把OffsetParent屬性指向Body元素,而且IE對(duì)OffsetLeft取值不同),在行內(nèi)標(biāo)簽內(nèi)嵌入行內(nèi)標(biāo)簽這種情況下,問題尤為明顯(各個(gè)瀏覽器對(duì)OffsetLeft屬性的取值就都有差異了,無理可循)。
好了,offsetLeft就講完了,我們繼續(xù)看offsetTop屬性。
支持的瀏覽器:Internet Explorer 4.0+,Mozilla 1.0+,Netscape 6.0+,Opera 7.0+,Safari 1.0+
定義:
返回一個(gè)數(shù)值,指明了當(dāng)前元素的上邊緣到其offsetTop屬性返回的對(duì)象的上邊緣的距離。
句法:
topDis = element.offsetTop
前面對(duì)于offsetLeft的Bug也存在于offsetTop屬性中,同樣,這個(gè)Bug在IE 8 Beta 1中也已經(jīng)修復(fù)。
圖三:在IE7及以下版本中,offsetsetTop屬性的Bug。
當(dāng)然也不要在內(nèi)聯(lián)標(biāo)簽內(nèi)嵌入標(biāo)簽,因?yàn)閃ebKit內(nèi)核瀏覽器會(huì)錯(cuò)誤解釋offsetParent屬性。
offsetWidth屬性
支持的瀏覽器:Internet Explorer 4.0+,Mozilla 1.0+,Netscape 6.0+,Opera 7.0+,Safari 1.0+
定義:
當(dāng)前元素的寬度。
句法:
elementWidth = element.offsetWidth
需要指出的是,offsetWidth屬性所指的寬度是當(dāng)前元素的width+padding+border+margin的總和。
offsetHeight屬性
支持的瀏覽器:Internet Explorer 4.0+,Mozilla 1.0+,Netscape 6.0+,Opera 7.0+,Safari 1.0+
定義:
當(dāng)前元素的高度。
句法:
elementHeight = element.offsetHeight
同樣,offsetWidth屬性所指的高度是當(dāng)前元素的Height+padding+border+margin的總和。
以上所說的四個(gè)屬性再加上上一篇文章的offsetParent屬性其實(shí)都不是Dom規(guī)范的一部分,但是目前的瀏覽器都實(shí)現(xiàn)了它們,這幾個(gè)屬性也是實(shí)現(xiàn)Javascript拖拽功能的核心元素。因此一定要深入理解它們。
下一篇將講講事件中的相關(guān)屬性。
相關(guān)文章
JavaScript MutationObserver實(shí)例講解
MutationObserver用來監(jiān)視DOM變動(dòng)。DOM的任何變動(dòng),比如節(jié)點(diǎn)增減、屬性的變動(dòng)、文本內(nèi)容的變動(dòng)都會(huì)觸發(fā)MutationObserver事件,它與事件有一個(gè)本質(zhì)不同:事件是同步觸發(fā),MutationObserver則是異步觸發(fā),DOM的變動(dòng)并不會(huì)馬上觸發(fā),而是要等到當(dāng)前所有DOM操作都結(jié)束才觸發(fā)2022-12-12js中判斷數(shù)字\字母\中文的正則表達(dá)式 (實(shí)例)
js中判斷數(shù)字\字母\中文的正則表達(dá)式,需要的朋友可以參考下2012-06-06使用UrlConnection實(shí)現(xiàn)后臺(tái)模擬http請(qǐng)求的簡(jiǎn)單實(shí)例
這篇文章主要介紹了使用UrlConnection實(shí)現(xiàn)后臺(tái)模擬http請(qǐng)求的簡(jiǎn)單實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-01-01js獲取異步函數(shù)數(shù)據(jù)的實(shí)現(xiàn)
本文主要介紹了js獲取異步函數(shù)數(shù)據(jù)的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02wavesurfer.js繪制音頻波形圖的實(shí)現(xiàn)
這篇文章主要介紹了wavesurfer.js繪制音頻波形圖的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04javascript動(dòng)態(tài)向網(wǎng)頁中添加表格實(shí)現(xiàn)代碼
動(dòng)態(tài)向網(wǎng)頁中添加表格的方法有很多,本文為大家介紹下利用javascript是如何實(shí)現(xiàn)的2014-02-02JavaScript中最容易混淆的作用域、提升、閉包知識(shí)詳解(推薦)
在web前端開發(fā)中js中的作用域,提升,閉包知識(shí)是經(jīng)常用到的也是很容易混淆的知識(shí)點(diǎn),接下來小編整理了本教程幫助大家學(xué)習(xí)2016-09-09inquirer.js一個(gè)用戶與命令行交互的工具詳解
這篇文章主要介紹了inquirer.js一個(gè)用戶與命令行交互的工具詳解,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05