JS中的ele.style.left 和ele.offsetLeft

一.JS中不能通过ele.style.left获取到值

<style>
    .box {
        position: absolute;
        top: 50px;
        left: 50px;
        width: 150px;
        height: 150px;
        background-color: #f00;
    }
</style>

    <script type="text/javascript">
    var box = document.querySelector('.box');
    console.log(box.style.left);   //空 ' ' 获取不到
    console.log(box.offsetLeft);   //50
    </script>

二.关于ele.style.left 和ele.offsetLeft的区别

• 具有定位属性的元素才有left属性,所有的元素都有offsetLeft属性;
• 只有行内样式设置了left,才可以通过ele.style.left获取;offsetLeft可以通过ele.offsetLeft直接获取;
• left可读可写,获取的是字符串;offsetLeft只可读,获取的是数值;

三.关于ele.style.left 和ele.offsetLeft的相同点

• 定位方式一样,如果父元素设置了定位元素,则相对于最近的父元素定位,负责相对于body定位;

四. JS中通过offsetLeft（offsetTop）方法获取元素偏移值很方便，得到的是数值；改变元素的偏移值使用style.left（top、right、bottom），通过style.left获取的是一个字符串的值，如果要通过style.left来改变元素位置，先要通过parseInt将获取到的当前left值转化为数值.

借鉴