JavaScript“动画”没有像我预期的那样工作_Javascript_Css_Dom_Animation

JavaScript“动画”没有像我预期的那样工作

javascript css dom animation

JavaScript“动画”没有像我预期的那样工作,javascript,css,dom,animation,Javascript,Css,Dom,Animation,我一直在尝试在鼠标上方移动一个20像素的红色盒子。但不是将20px添加到当前位置，而是转到20px位置我在这里得到了这个想法：但这对我不起作用：/ 谢谢 <html> <head> <meta charset="UTF-8"> <style> #element { position: absolute; left:100px; top:100px; height: 140px; width: 60px; background-color: re

我一直在尝试在鼠标上方移动一个20像素的红色盒子。但不是将20px添加到当前位置，而是转到20px位置

我在这里得到了这个想法：

但这对我不起作用：/

谢谢

<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>

boxElement.style.left返回一个类似于123px的字符串

第一次执行

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

这很好，因为boxElement.style.left将是一个空字符串。但是第二次，您正在尝试将style.left设置为20px20px字符串串联！，因此浏览器只是忽略新值，而保留旧值20px

您必须首先使用解析值以外的位置，然后将其添加到：

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

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

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

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

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

将字符串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';
        });
    }
});

这不太正确-在第一次鼠标悬停时，它将从100px跳到20px。注意到，如果要这样做，您应该在元素本身上将初始样式设置为100px，或者使用计算样式而不是样式属性yyep。谢谢这很好用，谢谢！但是设置x变量时，如何在不覆盖当前样式的情况下获取当前样式？类似于var x=parseIntboxElement.style.left；但它不起作用。。。啊。。。我是个笨蛋我借用了Felix的getComputedStyle。。。如果您想继续使用闭包变量方法，请将其编码并编辑到我的答案中