对于offsetLeft的一些简单理解

最新推荐文章于 2021-06-08 17:30:26 发布

Dove88888888

最新推荐文章于 2021-06-08 17:30:26 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端笔记文章标签：前台

本文链接：https://blog.youkuaiyun.com/Dove88888888/article/details/49700817

前端笔记专栏收录该内容

25 篇文章

订阅专栏

本文通过实例探讨了JS中元素定位方法，重点对比了offsetLeft与style.left的区别及应用，通过代码演示实现元素定位与样式设置的正确操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这个问题是我今天看图片轮播源码想到的，以前一直有一点疑问，在这里测试一下。

在js中，有很多情况需要对元素重新定位，用一个obj.style.left||obj.offsetLeft 来取得该元素的left。

offsetLeft返回一个Number型，如100；style.left返回一个String型，如100px；而offsetLeft不可以被从新写，所以大多是用offsetLeft来得到数字再+px写回style.left。

但是，好像只有你在标签内定义left时，style.left才会有返回，否则都是空字符串。

如果设定了父元素，offsetLeft和style.left得到的应该是一个。

可以用如下代码试试，自己编编看。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload=function(){
        var divs=document.getElementById("test");
        var _left=parseInt((divs.style.left),10);
        alert(_left);}
    </script>
    <style>
        #test{
            position:relative;
            background-color: #666666;
            height:200px;
            width:200px;

        }
    </style>
</head>
<body>
<div id="test" style="left:200px;"></div>
</body>
</html>