在Javascript中设置左样式CSS属性以移动滑块

Setting a left style CSS attribute to move a slider in Javascript

本文关键字：属性 移动 CSS 样式 Javascript 设置      更新时间：2023-09-26

我试图通过调整javascript中的CSS left属性和setInterval函数来在javascript中创建滑块效果。我的代码看起来像这个

<body onload="move('imagetag');">
    <div id="container">
        <img id="imagetag" src="img.jpg" style="left:40px; position:absolute;">
    </div>
    <script>
        function move(tag) {
            var target = document.getElementById(tag).style;
            var current = target.left;
            function moveObject() {
                current = parseInt(current) + 10 + 'px';
                console.log(current);
                setTimeout(moveObject, 1000);
            }
            setTimeout(moveObject, 1000);
        }
    </script>
</body>

console.log打印出正确的值，但它没有反映在CSS中。

这是因为您不编写样式，只需读取并编辑值本身，而不是target.left

            function move(tag) {    
                var target = document.getElementById(tag).style;
                var current = target.left;                  
                function moveObject () {
                    current = parseInt(current) + 10 + 'px';
                    console.log(current);
                    target.left = current;  // <- 
                    setTimeout( moveObject,1000);
                }
                setTimeout( moveObject, 1000);
            }
相关文章：