javascript
详解 javascript中offsetleft属性的用法（转）
詳解 javascript中offsetleft屬性的用法
轉(zhuǎn)載??2015-11-11 ? 投稿：mrr ???我要評(píng)論
本章節(jié)通過代碼實(shí)例介紹一下offsetleft屬性的用法，需要的朋友可以做一下參考。 任何支持style特性的HTML元素在JavaScript中都有一個(gè)對(duì)應(yīng)的style屬性。這個(gè)style對(duì)象是CSSStyleDeclaration的實(shí)例，包含著通過HTML的style特性指定的所有樣式信息，但不包含與外部樣式表或嵌入樣式表經(jīng)層疊而來的樣式（關(guān)鍵就在這句話！也就是說只有設(shè)置為行內(nèi)樣式的style屬性才能被獲取）。在style特性中指定的任何CSS屬性都將表現(xiàn)為這個(gè)style對(duì)象的相應(yīng)屬性 offsetLeft:這個(gè)屬性不是事件對(duì)象的屬性，而是DOM對(duì)象所有的，該屬性表示的是DOM對(duì)象在“該DOM對(duì)象的層級(jí)關(guān)系中離該對(duì)象最近的，設(shè)置了position的父對(duì)象”中的位置，雖然話是這么說的，但是不同的瀏覽器效果不一樣，FF中嚴(yán)格按上述說明執(zhí)行，但是在IE6/7中，這個(gè)屬性返回該DOM對(duì)象在其直接父對(duì)象中的位置，但是IE8改正了這個(gè)問題，不過IE8又有了一個(gè)新問題，其他的瀏覽器都是從父對(duì)象的內(nèi)容區(qū)域的左上角開始定位，IE8確是從父元素的border的左上角開始定位，由于測(cè)試環(huán)境為IETester中的IE8，不能排除是IETester的問題。此屬性可以返回當(dāng)前元素距離某個(gè)父輩元素左邊緣的距離，當(dāng)然這個(gè)父輩元素也是有講究的。
（1）.如果父輩元素中有定位的元素，那么就返回距離當(dāng)前元素最近的定位元素邊緣的距離。
（2）.如果父輩元素中沒有定位元素，那么就返回相對(duì)于body左邊緣距離。
語(yǔ)法結(jié)構(gòu):
obj.offsetleft
特別說明:此屬性是只讀的，不能夠賦值。
代碼實(shí)例:
?| 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元素的左側(cè)的距離，因?yàn)閙ain元素是第一個(gè)定位父輩元素。
?| 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元素左側(cè)的尺寸。
此屬性具有一定的兼容性問題，具體可以參閱offsetleft兼容性簡(jiǎn)單介紹一章節(jié)。
ps:js中的offsetLeft屬性具體有什么作用？
可以判斷一個(gè)物體的跟document的左邊距離，也就是瀏覽器左邊緣。比如你寫一個(gè)div 獲取這個(gè)div之后alert(你的div.offsetLeft)就可以看到他現(xiàn)在距離瀏覽器左邊的距離。當(dāng)然你也可以用他給對(duì)象賦值，offset不單單只有Left 還有offsetTop offsetWidth offsetHeight 都是JS里很有用的屬性。
?
談?wù)剬?duì)offsetleft兼容性的理解
轉(zhuǎn)載??2015-11-11 ? 投稿：mrr ???我要評(píng)論
offsetleft屬性具有一定的兼容性問題，在IE7瀏覽器中，它的返回值是相對(duì)于最近的父類元素的左側(cè)的距離，本文通過代碼示例給大家介紹offsetleft兼容性問題，小伙伴們一起看看吧關(guān)于此屬性的基本用法可以參閱offsetleft屬性用法詳解一章節(jié)。
此屬性具有一定的兼容性問題，那就是在IE7瀏覽器中，它的返回值是想對(duì)于最近的父輩元素的左側(cè)的距離。
?| 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沒有測(cè)試，感興趣的大家可以做一下測(cè)試。
下面抽點(diǎn)空給大家介紹offsetLeft與style.left的區(qū)別
offsetLeft 獲取的是相對(duì)于父對(duì)象的左邊距
left 獲取或設(shè)置相對(duì)于 具有定位屬性(position定義為relative)的父對(duì)象 的左邊距
如果父div的position定義為relative,子div的position定義為absolute，那么子div的style.left的值是相對(duì)于父div的值，
這同offsetLeft是相同的，區(qū)別在于：
1. style.left 返回的是字符串，如28px，offsetLeft返回的是數(shù)值28，如果需要對(duì)取得的值進(jìn)行計(jì)算，
還用offsetLeft比較方便。
2. style.left是讀寫的，offsetLeft是只讀的，所以要改變div的位置，只能修改style.left。
3. style.left的值需要事先定義，否則取到的值為空。而且必須要定義在html里，我做過試驗(yàn)，如果定義在
css里，style.left的值仍然 為空，這就是我剛開始碰到的問題，總是取不到style.left的值。
offsetLeft則仍然能夠取到，無需事先定義div的位置。
轉(zhuǎn)載于:https://www.cnblogs.com/lianghong/p/8427244.html
總結(jié)
以上是生活随笔為你收集整理的详解 javascript中offsetleft属性的用法（转）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 小班教案《聪明的小白兔》反思
- 下一篇： javascript：this 关键字