Question

我一直试图在鼠标悬停时移动红框20px。但是，不是将20px添加到当前位置，而是将其定位到“20px”。

我在这里得到了这个想法：Move an image with the arrow keys using JavaScript

但这对我不起作用：/

谢谢！

<html>
<head>
<meta charset="UTF-8">
<style>
#element {
position: absolute;
left:100px;
top:100px;
height: 140px;
width: 60px;
background-color: red;
}
</style>
</head>
<body>
    <div id="element"></div>
    <script>
    window.addEventListener('load', function () {
        boxElement = document.getElementById('element');
        if (boxElement) {
            boxElement.addEventListener('mouseover', function () {
                boxElement.style.left += 20 + 'px';
            });
        }
    });
</script>
</body>
</html>

Answer 1

boxElement.style.left会返回字符串，其类似于"123px"。

第一次执行

boxElement.style.left += 20 + 'px';

没关系，因为boxElement.style.left将是一个空字符串。但第二次，您尝试将style.left设置为20px20px（字符串连接！），因此浏览器只是忽略新值，并保留旧值20px。

您必须首先使用parseInt解析该值之外的位置，然后添加到该位置：

var left = boxElement.style.left;
boxElement.style.left = (parseInt(left, 10) + 20) + 'px';

另一个问题是boxElement.style.left不会返回从CSS类继承的初始值。为此，您可以使用getComputedStyle并在绑定事件处理程序之前设置一次：

var boxElement.style.left = 
    window.getComputedStyle(boxElement,null).getPropertyValue("left");

如果您正确阅读了linked question的代码，您可以看到那正是在那里所做的：

element.style.left = parseInt(element.style.left) - 5 + 'px';

Answer 2

您正在向空字符串添加字符串"20px"，这有效地将boxElement的style属性设置为"left: 20px"，覆盖样式表。

您可以每次获取元素的当前计算样式并添加到它，或者您可以使用位置保持闭包范围变量，如下所示：

window.addEventListener('load', function () {
    var x=window.getComputedStyle(boxElement,null).getPropertyValue("left");

    boxElement = document.getElementById('element');
    if (boxElement) {
        boxElement.addEventListener('mouseover', function () {
            x+=20;
            boxElement.style.left = x + 'px';
        });
    }
});

JavaScript“动画”无法正常工作

2 个答案: