Question

这是我目前用于该函数的代码，我过去使用键代码移动img但是我使用了一个函数来移动它，代码看起来应该是工作可能只是一个愚蠢的错误：

<!DOCTYPE html>
    <html>
        <head>
            <title>Return To Alnerwick</title>
            <style>
               body
                 {
                    background-image: url("https://s-media-cache-ak0.pinimg.com/736x/e8/d6/fc/e8d6fc15671a05eeaf592f85c6dbb2db.jpg");
                    background-size: 1500px 1000px;
                    background-repeat: no-repeat;
                 }

               img
                 {
                    position:absolute;
                    TOP:650px;
                    LEFT:750px;
                    width:100px;
                    height:100px
                 }
            </style>
            <script>
               function move() {
                  var element = document.getElementById("char");
                  element.style.left = parseInt(element.style.left) - 90 + 'px';
               }
            </script>
       </head>
       <body>
           <img id="char"src="/New Piskel (5).gif">
           <button onclick="move();">move</button>
       </body>
    </html>

Answer 1

这是因为您使用的是样式表。使用样式表时，您已获得计算出的样式：

function move() {
     var element = document.getElementById("char");
     var style = window.getComputedStyle(element);
     console.log("Current value: " + style.left);
     element.style.left = (parseInt(style.left) - 90) + 'px';
}

看一个工作小提琴：https://jsfiddle.net/vgb7tc03/1/

另请getComputedStyle参考：https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

Answer 2

在move功能中，您引用了element.style.left。这是元素的内联样式属性。内联样式属性根本没有在您的标记中定义。

您正在css中定义LEFT属性（不是内联）。您需要做的是从函数中引用LEFT css属性，或者在元素中而不是在CSS中内联left属性。

Answer 3

你的问题是element.style.left不会返回它的位置。有几种解决方案：

1）你知道你的图像已经从左边750px了所以你可以去

var img_left=750;

在脚本代码的开头，然后转到

img_left=img_left-90;
element.style.left = img_left + "px";

在你的功能中。

2）如果你想得到元素的位置，你会去

element.getBoundingClientRect().left;

而不是element.style.left所以整行都是

element.style.left=(element.getBoundingClientRect().left-90)+"px";

按下按钮时移动<img/>

3 个答案: