简单动画函数封装以及 obj.offsetLeft 、obj.style.left 区别

最新推荐文章于 2024-05-06 18:26:11 发布

古古外

最新推荐文章于 2024-05-06 18:26:11 发布

阅读量161

点赞数

分类专栏： JavaScript 文章标签： javascript css 前端

本文链接：https://blog.csdn.net/abcccc1111901/article/details/123117598

版权

JavaScript 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

<style>
        div {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        function animate(obj, target) {
            var timer = setInterval(function () {
                if (obj.offsetLeft >= 300) {//注意：这里不能用obj.style.left,因为他返回的是字符串
                    clearInterval(timer);
                    console.log(obj.style.left);
                }
                obj.style.left = obj.offsetLeft + 1 + 'px';
                console.log(obj.style.left);//(1,2,3,4,5,6,7...301)
            }, 20)
        }
        var div = document.querySelector('div');
        animate(div, 300);

    </script>
</body>

练习这个案例时，试图把obj.offsetLeft换成obj.style.left，结果运行后div没反应。。

原因：obj.offsetLeft返回的是数值而obj.style.left返回的是带有单位的字符串！！