Javascript拖拽系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight屬性第1/2頁(yè)
更新時(shí)間：2008年09月22日 15:28:24 作者：
Javascript拖拽用到的一些關(guān)于位置定位的一些參數(shù)
在閱讀本文之前，請(qǐng)先看一看第一篇文章Javascript拖拽系列文章1之offsetParent屬性，因?yàn)檠驖u進(jìn)是一個(gè)很好的習(xí)慣，值得提倡。
好了，看看我們今天的內(nèi)容吧。
首先讓我們先看一看element.offsetLeft屬性。
支持的瀏覽器：Internet Explorer 4.0+，Mozilla 1.0+，Netscape 6.0+，Opera 7.0+，Safari 1.0+
定義：返回一個(gè)像素?cái)?shù)值，它表示當(dāng)前元素的左邊緣到它的offsetParent屬性返回的對(duì)象左邊緣的偏移量。
句法：
leftDis = element.offsetLeft
offsetLeft屬性在Internet Explorer中的實(shí)現(xiàn)存在Bug，無論當(dāng)前元素的offsetParent屬性取值如何，它總是以Body元素為參照物來計(jì)算offsetLeft。幸運(yùn)的是，這個(gè)Bug在Intern Explorer 8 Beta 1中已經(jīng)修復(fù)。仍然需要注意，IE會(huì)從Body元素的Left-Border為標(biāo)準(zhǔn)開始計(jì)算OffsetLeft，而其他的瀏覽器將從Left-Margin開始計(jì)算。
測(cè)試代碼1：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
body{
border:1px solid red;
margin-left:0px;
}
#parent{
position:relative;
left:25px;
top:0px;
border:1px solid black;
}
</style>
<script type="text/javascript" language="JavaScript">
function offset_init(){
var pElement = document.getElementById("sonObj");
parentObj = pElement.offsetParent;
var ioffsetLeft=pElement.offsetLeft;
alert(parentObj.tagName);
alert(ioffsetLeft);
}
</script>
</head>
<body onload="offset_init()">
<div id="parent">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
<span id="sonObj">測(cè)試OffsetParent屬性</span>
</div>
</body>
</html>
好了，看看我們今天的內(nèi)容吧。
首先讓我們先看一看element.offsetLeft屬性。
支持的瀏覽器：Internet Explorer 4.0+，Mozilla 1.0+，Netscape 6.0+，Opera 7.0+，Safari 1.0+
定義：返回一個(gè)像素?cái)?shù)值，它表示當(dāng)前元素的左邊緣到它的offsetParent屬性返回的對(duì)象左邊緣的偏移量。
句法：
leftDis = element.offsetLeft
offsetLeft屬性在Internet Explorer中的實(shí)現(xiàn)存在Bug，無論當(dāng)前元素的offsetParent屬性取值如何，它總是以Body元素為參照物來計(jì)算offsetLeft。幸運(yùn)的是，這個(gè)Bug在Intern Explorer 8 Beta 1中已經(jīng)修復(fù)。仍然需要注意，IE會(huì)從Body元素的Left-Border為標(biāo)準(zhǔn)開始計(jì)算OffsetLeft，而其他的瀏覽器將從Left-Margin開始計(jì)算。
測(cè)試代碼1：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
body{
border:1px solid red;
margin-left:0px;
}
#parent{
position:relative;
left:25px;
top:0px;
border:1px solid black;
}
</style>
<script type="text/javascript" language="JavaScript">
function offset_init(){
var pElement = document.getElementById("sonObj");
parentObj = pElement.offsetParent;
var ioffsetLeft=pElement.offsetLeft;
alert(parentObj.tagName);
alert(ioffsetLeft);
}
</script>
</head>
<body onload="offset_init()">
<div id="parent">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
<span id="sonObj">測(cè)試OffsetParent屬性</span>
</div>
</body>
</html>
在IE中，運(yùn)行這段代碼后，會(huì)依次彈出兩個(gè)窗口，分別顯示“DIV”、“437”,分別表示offsetParent和offsetLeft。在下圖中，紅色邊框代表Body元素，黑色邊框代表Div元素。從而證明即使在IE中，offsetParent不是Body元素，offsetLeft的計(jì)算也以Body元素為標(biāo)準(zhǔn)。
圖一：在IE7中的結(jié)果
在IE 8 Beta 1中這Bug已經(jīng)被修復(fù)，將分別返回“DIV”，“411”。已經(jīng)和其他瀏覽器一樣符合了標(biāo)準(zhǔn)。
相關(guān)文章
微信小程序頁(yè)面縮放式側(cè)滑效果的實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序頁(yè)面縮放式側(cè)滑效果的實(shí)現(xiàn)代碼，實(shí)現(xiàn)原理就是通過點(diǎn)擊按鈕，往需要?jiǎng)赢嫷膁iv中添加或移除擁有動(dòng)畫效果的class。具體實(shí)例代碼大家跟隨小編一起通過本文學(xué)習(xí)吧2018-11-11
JavaScript中this的用法及this在不同應(yīng)用場(chǎng)景的作用解析
由于其運(yùn)行期綁定的特性，JavaScript 中的 this 含義要豐富得多，它可以是全局對(duì)象、當(dāng)前對(duì)象或者任意對(duì)象，這完全取決于函數(shù)的調(diào)用方式，這篇文章主要給大家介紹了JavaScript中this的用法及this在不同應(yīng)用場(chǎng)景的作用解析，一起看看吧2017-04-04
事件——怎樣使用事件以及IE和DOM事件模型之間存在哪些主要差別，有需要的朋友可以參考一下2013-10-10
淺談javascript語(yǔ)法和定時(shí)函數(shù)
初學(xué)者可能對(duì)Javascript的定時(shí)器有誤解，認(rèn)為它們是線程，其實(shí)Javascript是運(yùn)行于單線程中的，而定時(shí)器僅僅是計(jì)劃在未來的某個(gè)時(shí)間執(zhí)行，而具體的執(zhí)行時(shí)間是不能保證的，因?yàn)樵陧?yè)面的生命周期中，不同的時(shí)間可能有其它代碼在控制Javascript的里進(jìn)程。2015-05-05
關(guān)于javascript獲取內(nèi)聯(lián)樣式與嵌入式樣式的實(shí)例
這篇文章主要介紹了關(guān)于javascript獲取內(nèi)聯(lián)樣式與嵌入式樣式的實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
javascript語(yǔ)句中的CDATA標(biāo)簽的意義
javascript語(yǔ)句中的CDATA標(biāo)簽的意義...2007-05-05
JavaScript 字符串常用操作小結(jié)(非常實(shí)用)
這篇文章主要介紹了JavaScript 字符串常用操作的知識(shí),包括字符串截取，查找類的方法，對(duì)js字符串操作相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-11-11
這篇文章主要針對(duì)微信jssdk用法進(jìn)行匯總，通過ready接口處理成功驗(yàn)證、通過error接口處理失敗驗(yàn)證等內(nèi)容介紹，感興趣的小伙伴們可以參考一下2016-07-07
javascript控制圖片播放的實(shí)現(xiàn)代碼
這篇文章主要介紹了javascript控制圖片播放的實(shí)現(xiàn)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2015-08-08
密碼強(qiáng)度檢測(cè)效果實(shí)現(xiàn)原理與代碼
密碼強(qiáng)度檢測(cè)有利于提醒增加密碼的安全指數(shù)，更好的保護(hù)密碼安全,接下來介紹密碼強(qiáng)度檢測(cè)效果的實(shí)現(xiàn)2013-01-01