通过更改 CSS 移动对象

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，您只会获得元素的内联样式（而不是继承或外部样式 sheet 样式），如文档中所述：https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style.