JavaScript中的offsetLeft以及obj.style.left

最新推荐文章于 2024-08-17 10:56:45 发布

GY_U_YG

最新推荐文章于 2024-08-17 10:56:45 发布

阅读量1.2k

点赞数 1

分类专栏： JavaScript运动框架前端文章标签： javascript

本文链接：https://blog.csdn.net/GY_U_YG/article/details/72149041

版权

前端同时被 2 个专栏收录

61 篇文章 6 订阅

订阅专栏

JavaScript运动框架

8 篇文章 1 订阅

订阅专栏

1, offsetLeft 获取的是相对于父对象的左边距;
2, left 获取或设置相对于具有定位属性(position定义为relative)的父对象的左边距;
下面看看一些例子

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        #div1 {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <script type="text/javascript">
        function getStyle(obj, attr) {
            if (obj.currentStyle) {//IE
                return obj.currentStyle[attr];
            } else {
                return getComputedStyle(obj, null)[attr];
            }
        }
        var oDiv = document.getElementById('div1');
        console.log('getStyle("left") = ' + getStyle(oDiv, 'left'));
        console.log('offsetLeft = ' + oDiv.offsetLeft);
    </script>
</body>
</html>

结果：oDiv.style.left = 0px , oDiv.offsetLeft = 0

#div1 {
    width: 100px;
    height: 100px;
    background: red;
    position: absolute;
    border: 3px solid black;
}

结果：oDiv.style.left = 0px , oDiv.offsetLeft = 0

#div1 {
    width: 100px;
    height: 100px;
    background: red;
    position: absolute;
    border: 3px solid black;
    padding: 14px;
}

结果：oDiv.style.left = 0px , oDiv.offsetLeft = 0

#div1 {
    width: 100px;
    height: 100px;
    background: red;
    position: absolute;
    border: 3px solid black;
    padding: 14px;
    margin-left: 24px;
}

结果：oDiv.style.left = 0px , oDiv.offsetLeft = 24

可见，offsetLeft是考虑到了margin-left了，因为margin-left，div确实在左边空出了24px的空间，但是style.left不管，style.left只看样式表中的left，其他的不管，就像前文中讲到的offsetWidth, offsetWidth不仅仅考虑到样式表中的width，更是考虑到padding和border，如下：

offsetWidth = width + padding + border;

#div1 {
    width: 100px;
    height: 100px;
    background: red;
    position: absolute;
    border: 3px solid black;
    padding: 14px;
    margin-left: 24px;
}