JavaScript offsetLeft

admin發表於2018-11-14
JavaScript

理解屬性，可以從它的名稱入手，在一定程度上可以體現它的功能。

offsetLeft是合成詞，由如下兩個單詞構成：

（1）.offset：翻譯成漢語具有偏移量的意思。

（2）.left：翻譯成漢語具有左側的意思。

可以猜測屬性功能與元素左側方位的偏移量相關，既然是偏移量，必然有一個參照物。

事實也是如此，offsetLeft屬性返回元素左側距離參照元素左邊界偏移量。

參照元素是當前元素offsetParent屬性返回的元素節點。

圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201812/10/151859na8bkjikzjdjsait.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

關於offsetParent用法參閱JavaScript offsetParent一章節。

特別說明：

（1）.offsetLeft屬性返回值是一個數字（預設單位是畫素）。

（2）.只讀屬性，不能為其賦值。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
let num=dom.offsetLeft

瀏覽器支援:

（1）.IE瀏覽器支援此屬性。

（2）.edge瀏覽器支援此屬性。

（3）.谷歌瀏覽器支援此屬性。

（4）.opera瀏覽器支援此屬性。

（5）.火狐瀏覽器支援此屬性。

（6）.safria瀏覽器支援此屬性。

特別說明：在IE7有一點相容問題，由於此瀏覽器過於古老，本文不做介紹。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
*{margin:0px;padding:0px;}
body{padding:50px;margin:50px;}
#main{width:300px;height:300px;background:red;margin:20px;}
#box{width:200px;height:200px;background:blue;}
#inner{
  width:100px;
  height:100px;
  line-height:100px;
  background:green;
  text-align:center;
}
</style>
<script>
window.onload=function(){
  let oinner=document.getElementById("inner");
  oinner.innerHTML=oinner.offsetLeft;
}
</script>
</head>
<body>
  <div id="main">
    <div id="box">
      <div id="inner"></div>
    </div>
  </div>
</body>
</html>

上述程式碼可以獲取inner元素的offsetLeft屬性值。

確定偏移參考元素inner.offsetParent是關鍵，規則如下：

（1）.如果inner具有定祖先元素，那麼offsetParent返回值是第一個定位元素。

（2）.如果inner沒有定位祖先元素，那麼offsetParent返回值是body。

程式碼中，inner並沒有定位的祖先元素，那麼offsetParent返回值是body元素。

offsetLeft的返回值就是inner元素左側距離body左邊界的尺寸：

body的左外邊距 + body的左內邊距 + main的左外邊距，等於120px。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
*{margin:0px;padding:0px;}
body{padding:50px;margin:50px;}
#main{width:300px;height:300px;background:red;position:relative;}
#box{width:200px;height:200px;background:blue;}
#inner{
  width:100px;
  height:100px;
  line-height:100px;
  background:green;
  text-align:center;
  margin:20px;
}
</style>
<script>
window.onload=function(){
  let oinner=document.getElementById("inner");
  oinner.innerHTML=oinner.offsetLeft;
}
</script>
</head>
<body>
  <div id="main">
    <div id="box">
      <div id="inner"></div>
    </div>
  </div>
</body>
</html>

main元素採用相對定位，那麼inner元素offsetParent屬性返回值是main元素物件。

也就是inner元素偏移是以main元素為參考物件，最終結果是inner元素的左外邊距20px。

相關文章