JavaScript中div.style.left获取值为空的解决方案与offsetLeft区别

问题总结：内联样式与CSS样式的获取差异

一、问题总结：

只有通过内联样式直接写在元素内部的CSS属性，才能通过div.style.left直接获取其值。若样式定义在外部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);

offsetLeft与left的区别

二、关于offsetLeft和left的区别（关于offsetLeft：https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/offsetLeft）

1. 只有设置了position为relative或absolute的元素才拥有left属性，而所有元素都具备offsetLeft属性。

2. 若元素内联样式中设置了left，则可通过div.style.left获取；offsetLeft则直接通过div.offsetLeft获取。

3. left属性可读可写，获取值为字符串；offsetLeft为只读属性，获取值为数字。

相同点：两者的定位基准方式一致。如果父元素设置了定位（position设为relative或absolute），则相对于该定位元素定位；否则相对于根元素定位。

案例：offsetParent的定位机制

三、案例：

HTMLElement.offsetParent是一个只读属性，返回指向包含该元素的最近层级的定位元素。若无定位元素，offsetParent为最近的table元素或根元素（标准模式下为html；quirks模式下为body）。当元素style.display设置为"none"时，offsetParent返回null。offsetParent很有用，因为offsetTop和offsetLeft都是相对于其内边距边界的。

下面的span的父元素没有设置定位元素，所以该元素的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是个行内元素，它没有没absolute定位，但还是默认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的父元素添加一个定位属性，结果如下：

总结：正确获取与修改元素位置的方法

四、总结：

JavaScript中通过offsetLeft（或offsetTop）方法获取元素偏移值十分便捷，其返回值为数值；而改变元素偏移值需使用style.left（或top、right、bottom）。通过style.left获取的是字符串值，若要通过style.left改变元素位置，需先使用parseInt将获取到的当前left值转换为数值。

以上所述是小编给大家介绍的JavaScript中无法通过div.style.left获取值的解决方法，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言。