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

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

javascript html css

设置左样式CSS属性以在Javascript中移动滑块,javascript,html,css,Javascript,Html,Css,我试图通过调整javascript中的CSS left属性和setInterval函数，在javascript中创建一个滑块效果。我的代码如下所示 <body onload="move('imagetag');"> <div id="container"> <img id="imagetag" src="img.jpg" style="left:40px; position:absolute;"> </div>

我试图通过调整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>


功能移动（标签）{
var target=document.getElementById（tag）.style；
var电流=目标电流。左侧；
函数moveObject（）{
电流=parseInt（电流）+10+'px'；
console.log（当前）；
setTimeout（移动对象，1000）；
}
setTimeout（移动对象，1000）；
}

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

这是因为您不编写样式，只需读取并编辑值本身，而不是目标。左

            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);
            }

函数移动（标记）{
var target=document.getElementById（tag）.style；
var电流=目标电流。左侧；
函数moveObject（）{
电流=parseInt（电流）+10+'px'；
console.log（当前）；
target.left=current；//在javascript中，这个current=target.left
是一个副本，而不是一个referenceOk，这是有意义的。接下来的工作是什么？我是否使用引用，即target.left而不是current？