JS中div.style.left和div.offsetLeft的区别-CSDN博客

本文链接：https://blog.csdn.net/HarryMing/article/details/95219403

两者比较重要的几点区别

一、最大区别在于`offsetLeft`可以返回没有定位盒子的距离左侧的位置。

代码如下(此时父子盒子都不带有定位)：

    <head>
        <style>
            .out{
                width: 100px;
                height: 100px;
                border: 10px solid ;
                /*position: relative;*/
            }
            .in{
                width: 50px;
                height: 50px;
                /*position: absolute;*/
                background-color: #b4ff78;
            }
        </style>
    </head>
    <script>
        onload = function () {
            var div2 = document.getElementById("in")
            console.log(div2.offsetLeft)
            console.log(div2.style.left) 
 }
    
    </script>
    <body>
        <div class="out" id="out">
            <div class="in" id="in" style="left: 30px">
    
            </div>
        </div>
    </body>

结果显示为：
![显示结果](https://img-blog.csdnimg.cn/20190709181506592.png
显然offsetLeft显示的是子盒子距离body的距离，style.left是距离父盒子的30px（行内式给定）。然后将注释的定位打开，然后将行内式中的style样式去掉，重新查看结果：
在这里插入图片描述