javascript中offsetleft和offsetTop屬性的用法
此屬性可以返回當(dāng)前元素距離某個(gè)父輩元素左邊緣的距離，當(dāng)然這個(gè)父輩元素也是有講究的。
（1）.如果父輩元素中有定位的元素，那么就返回距離當(dāng)前元素最近的定位元素邊緣的距離。
（2）.如果父輩元素中沒(méi)有定位元素，那么就返回相對(duì)于body左邊緣距離。
語(yǔ)法結(jié)構(gòu):
obj.offsetleft
特別說(shuō)明:此屬性是只讀的，不能夠賦值。
代碼實(shí)例:
<!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元素的左側(cè)的距離，因?yàn)閙ain元素是第一個(gè)定位父輩元素。
<!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元素左側(cè)的尺寸。
ps:js中的offsetLeft屬性具體有什么作用？
可以判斷一個(gè)物體的跟document的左邊距離，也就是瀏覽器左邊緣。比如你寫(xiě)一個(gè)div 獲取這個(gè)div之后alert(你的div.offsetLeft)就可以看到他現(xiàn)在距離瀏覽器左邊的距離。當(dāng)然你也可以用他給對(duì)象賦值，offset不單單只有Left 還有offsetTop offsetWidth offsetHeight 都是JS里很有用的屬性。
獲取offsetTop和offsetLeft值的js代碼(兼容)
function offsetTop( elements ){
var top = elements.offsetTop;
var parent = elements.offsetParent;
while( parent != null ){
top += parent.offsetTop;
parent = parent.offsetParent;
};
return top;
};
function offsetLeft( elements ){
var left = elements.offsetLeft;
var parent = elements.offsetParent;
while( parent != null ){
left += parent.offsetLeft;
parent = parent.offsetParent;
};
return parent;
};
如對(duì)本文有疑問(wèn)，請(qǐng)?zhí)峤坏浇涣髡搲?，廣大熱心網(wǎng)友會(huì)為你解答！！ 點(diǎn)擊進(jìn)入論壇
