當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

详解 javascript中offsetleft属性的用法（转）

發布時間：2023/12/31 javascript 26 豆豆

生活随笔收集整理的這篇文章主要介紹了详解 javascript中offsetleft属性的用法（转）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

詳解 javascript中offsetleft屬性的用法

轉載??2015-11-11 ? 投稿：mrr ???我要評論

本章節通過代碼實例介紹一下offsetleft屬性的用法，需要的朋友可以做一下參考。任何支持style特性的HTML元素在JavaScript中都有一個對應的style屬性。這個style對象是CSSStyleDeclaration的實例，包含著通過HTML的style特性指定的所有樣式信息，但不包含與外部樣式表或嵌入樣式表經層疊而來的樣式（關鍵就在這句話！也就是說只有設置為行內樣式的style屬性才能被獲取）。在style特性中指定的任何CSS屬性都將表現為這個style對象的相應屬性 offsetLeft:這個屬性不是事件對象的屬性，而是DOM對象所有的，該屬性表示的是DOM對象在“該DOM對象的層級關系中離該對象最近的，設置了position的父對象”中的位置，雖然話是這么說的，但是不同的瀏覽器效果不一樣，FF中嚴格按上述說明執行，但是在IE6/7中，這個屬性返回該DOM對象在其直接父對象中的位置，但是IE8改正了這個問題，不過IE8又有了一個新問題，其他的瀏覽器都是從父對象的內容區域的左上角開始定位，IE8確是從父元素的border的左上角開始定位，由于測試環境為IETester中的IE8，不能排除是IETester的問題。

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

（1）.如果父輩元素中有定位的元素，那么就返回距離當前元素最近的定位元素邊緣的距離。
（2）.如果父輩元素中沒有定位元素，那么就返回相對于body左邊緣距離。

語法結構:

obj.offsetleft

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

代碼實例:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50

<!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元素是第一個定位父輩元素。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47

<!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里很有用的屬性。

談談對offsetleft兼容性的理解

轉載??2015-11-11 ? 投稿：mrr ???我要評論

offsetleft屬性具有一定的兼容性問題，在IE7瀏覽器中，它的返回值是相對于最近的父類元素的左側的距離，本文通過代碼示例給大家介紹offsetleft兼容性問題，小伙伴們一起看看吧

關于此屬性的基本用法可以參閱offsetleft屬性用法詳解一章節。

此屬性具有一定的兼容性問題，那就是在IE7瀏覽器中，它的返回值是想對于最近的父輩元素的左側的距離。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50

<!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>

上面的代碼在其他瀏覽器中返回值是100，但是在IE7瀏覽器中返回值是50。

至于IE6沒有測試，感興趣的大家可以做一下測試。

下面抽點空給大家介紹offsetLeft與style.left的區別

offsetLeft 獲取的是相對于父對象的左邊距

left 獲取或設置相對于具有定位屬性(position定義為relative)的父對象的左邊距

如果父div的position定義為relative,子div的position定義為absolute，那么子div的style.left的值是相對于父div的值，
這同offsetLeft是相同的，區別在于：

1. style.left 返回的是字符串，如28px，offsetLeft返回的是數值28，如果需要對取得的值進行計算，
還用offsetLeft比較方便。

2. style.left是讀寫的，offsetLeft是只讀的，所以要改變div的位置，只能修改style.left。

3. style.left的值需要事先定義，否則取到的值為空。而且必須要定義在html里，我做過試驗，如果定義在
css里，style.left的值仍然為空，這就是我剛開始碰到的問題，總是取不到style.left的值。

offsetLeft則仍然能夠取到，無需事先定義div的位置。

轉載于:https://www.cnblogs.com/lianghong/p/8427244.html

總結

以上是生活随笔為你收集整理的详解 javascript中offsetleft属性的用法（转）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。