DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 詳解 javascript中offsetleft屬性的用法
詳解 javascript中offsetleft屬性的用法
編輯:關於JavaScript     

此屬性可以返回當前元素距離某個父輩元素左邊緣的距離,當然這個父輩元素也是有講究的。

(1).如果父輩元素中有定位的元素,那麼就返回距離當前元素最近的定位元素邊緣的距離。
(2).如果父輩元素中沒有定位元素,那麼就返回相對於body左邊緣距離。

語法結構:

obj.offsetleft

特別說明:此屬性是只讀的,不能夠賦值。

代碼實例:

<!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;
}
#main{
 width:300px;
 height:300px;
 background:red;
 position:absolute;
 left:100px;
 top:100px;
}
#box{
 width:200px;
 height:200px;
 background:blue;
 margin:50px; 
 overflow:hidden;
}
#inner{
 width:50px;
 height:50px;
 background:green;
 text-align:center;
 line-height:50px;
 margin:50px;
}
</style>
<script type="text/javascript">
window.onload=function(){
 var inner=document.getElementById("inner");
 inner.innerHTML=inner.offsetLeft;
}
</script>
</head>
<body>
<div id="main">
 <div id="box">
 <div id="inner"></div>
 </div>
</div>
</body>
</html>

上面的代碼可以返回inner元素距離main元素的左側的距離,因為main元素是第一個定位父輩元素。

<!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;
}
#main{
 width:300px;
 height:300px;
 background:red;
 margin:100px;
}
#box{
 width:200px;
 height:200px;
 background:blue;
 overflow:hidden;
}
#inner{
 width:50px;
 height:50px;
 background:green;
 text-align:center;
 line-height:50px;
 margin:50px;
}
</style>
<script type="text/javascript">
window.onload=function(){
 var inner=document.getElementById("inner");
 inner.innerHTML=inner.offsetLeft;
}
</script>
</head>
<body>
<div id="main">
 <div id="box">
 <div id="inner"></div>
 </div>
</div>
</body>
</html>

上面的代碼返回inner元素距離body元素左側的尺寸。

此屬性具有一定的兼容性問題,具體可以參閱offsetleft兼容性簡單介紹一章節。

ps:js中的offsetLeft屬性具體有什麼作用?

可以判斷一個物體的跟document的左邊距離,也就是浏覽器左邊緣。比如你寫一個div 獲取這個div之後alert(你的div.offsetLeft)就可以看到他現在距離浏覽器左邊的距離。當然你也可以用他給對象賦值,offset不單單只有Left 還有offsetTop offsetWidth offsetHeight 都是JS裡很有用的屬性。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved