JavaScript中无法通过div.style.left获取值怎么解决
这篇文章主要介绍“JavaScript中无法通过div.style.left获取值怎么解决”，在日常操作中，相信很多人在JavaScript中无法通过div.style.left获取值怎么解决问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”JavaScript中无法通过div.style.left获取值怎么解决”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
一、问题总结：
样式必须直接写在元素内部才能通过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的区别
1.定义了position：relative或absolute属性的元素才有left属性，元素都有offsetLeft属性。
2.元素内联样式中设置了left，才能通过div.style.left获取；offsetLeft直接通过div.offsetLeft获取。
3.left可读可写，获取到的是字符串；offsetLeft只读，获取到的是数字。
相同点：定位方式一样，如果父元素设置了定位元素（position设置为relative或absolute），则相对于定位元素定位，否则就是相对于根元素定位。
三、案例：
HTMLElement.offsetParent 是一个只读属性，返回一个指向最近的（closest，指包含层级上的最近）包含该元素的定位元素。如果没有定位的元素，则 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中无法通过div.style.left获取值怎么解决”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注蜗牛博客网站，小编会继续努力为大家带来更多实用的文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：niceseo99@gmail.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
评论