Question

我想通过更改JavaScript中的CSS值来移动对象。

我想让它在点击一个按钮时向左移动10像素。

HTML：

<button id="left" onclick="goLeft()">Left</button>
<div id="gamer">BLOCK</div>

CSS：

    #gamer{

            width:100px;
            height:50px;
            text-align: center;
            position:absolute;
            left:300px;
            top:300px;
        }

JavaScript的：

function goLeft(){
            var gamer = document.getElementById("gamer");
            gamer.style.left = (parseInt(gamer.style.left) - 10) + "px";

        }

Answer 1

更改您的javascript如下

<script>
    function goLeft() {
        var gamer = document.getElementById("gamer");            
        gamer.style.left = (parseInt(gamer.offsetLeft, 10) - 10) + "px";

    }
</script>

offsetLeft将为您提供当前的左侧位置。

Answer 2

您要使用的是window.getComputedStyle()而不是：

function goLeft() {
   var gamer = document.getElementById("gamer");
   var computedStyle = window.getComputedStyle(gamer);
   gamer.style.left = (parseInt(computedStyle.left, 10) - 10) + "px";
}

这将为您提供元素的当前样式。

然而，如果您使用的是element.style，那么您只会获得文档中所列的元素内联样式（不是继承样式或外部样式表样式）：https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style。

通过更改CSS移动对象

2 个答案: