快捷導(dǎo)航

JavaScript中無法通過div.style.left獲取值的解決方法

更新時間：2017年02月19日 12:51:31 作者：youyi2016

這篇文章主要介紹了JavaScript中無法通過div.style.left獲取值的問題分析及解決方法,需要的朋友可以參考下

一、問題總結(jié)：

樣式必須直接寫在元素內(nèi)部才能通過div.style.left直接獲取屬性值（也就是必須是內(nèi)聯(lián)樣式才行），定義在css中的樣式不能通過這種方式獲取。

讓元素移動到200停止

setTimeout ( function () {  
  var div = document.getElementById("div4");
  //var left = parseInt(div.style.left) + 5;
  var left = div.offsetLeft + 5;
  
  div.style.left = left + "px";
  if (left < 200) {
    setTimeout( arguments.callee, 50);
  }
  
}, 50);

二、關(guān)于offsetLeft和left的區(qū)別（關(guān)于offsetLeft：https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/offsetLeft）

1.定義了position：relative或absolute屬性的元素才有l(wèi)eft屬性，元素都有offsetLeft屬性。

2.元素內(nèi)聯(lián)樣式中設(shè)置了left，才能通過div.style.left獲?。籵ffsetLeft直接通過div.offsetLeft獲取。

3.left可讀可寫，獲取到的是字符串；offsetLeft只讀，獲取到的是數(shù)字。

相同點：定位方式一樣，如果父元素設(shè)置了定位元素（position設(shè)置為relative或absolute），則相對于定位元素定位，否則就是相對于根元素定位。

三、案例：

HTMLElement.offsetParent 是一個只讀屬性，返回一個指向最近的（closest，指包含層級上的最近）包含該元素的定位元素。如果沒有定位的元素，則 offsetParent 為最近的 table 元素對象或根元素（標(biāo)準(zhǔn)模式下為 html；quirks 模式下為 body）。當(dāng)元素的 style.display 設(shè)置為 "none" 時，offsetParent 返回 null。offsetParent 很有用，因為 offsetTop 和 offsetLeft 都是相對于其內(nèi)邊距邊界的。

下面的span的父元素沒有設(shè)置定位元素，所以該元素的offsetParent為根元素，此時的offsetTop相對于根元素定位。

<div style="width: 300px; border-color:blue;
 border-style:solid; border-width:1;">
 <span>Short span. </span>
 <span id="long">Long span that wraps withing this div.</span>
 </div>
<div id="box" style="position: absolute; border-color: red;
 border-width: 1; border-style: solid; z-index: 10">
</div>
<script>
 var box = document.getElementById("box");
 var long = document.getElementById("long");
 //
 // long.offsetLeft這個值就是span的offsetLeft.
 // span是個行內(nèi)元素，它沒有沒absolute定位，但還是默認(rèn)offserParent就是父元素，而不是根
 //
 box.style.left = long.offsetLeft + document.body.scrollLeft + "px";
 box.style.top = long.offsetTop + document.body.scrollTop + "px";
 box.style.width = long.offsetWidth + "px";
 box.style.height = long.offsetHeight + "px";
</script>

如果給long的父元素添加一個定位屬性，結(jié)果如下：

四、總結(jié)：

javascript中通過offsetLeft（offsetTop）方法獲取元素偏移值很方便，得到的是數(shù)值；改變元素的偏移值使用style.left（top、right、bottom），通過style.left獲取的是一個字符串的值，如果要通過style.left來改變元素位置，先要通過parseInt將獲取到的當(dāng)前l(fā)eft值轉(zhuǎn)化為數(shù)值。

以上所述是小編給大家介紹的JavaScript中無法通過div.style.left獲取值的解決方法，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言。

您可能感興趣的文章: