Question

我有一只黑猫的照片我想逐渐增加其宽度，并使图像从左向右移动，以增加其自身的左边距。我不明白为什么宽度会增加，而左边距会显示NaN value。

Html：-

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Cat Walk</title>
</head>
<body>
    <img id="cat-gif" style="position:absolute;" src="http://www.anniemation.com/clip_art/images/cat-walk.gif">
    <script src="main.js"></script>
</body>

在此处具有移动猫的功能：-

var catWalk = function() {

var cat = document.getElementById("cat-gif");

cat.setAttribute('width', cat.width+10); //THIS WORKS
cat.setAttribute('marginLeft', cat.marginLeft+10); //THIS DOES NOT WORK!

}

//Call to the function
window.setInterval(catWalk, 500);

Answer 1

尝试使用以下内容：

cat.style.marginLeft = (parseInt((cat.style.marginLeft) || parseInt(window.getComputedStyle(cat).marginLeft))) + 10 + 'px';

默认情况下，元素上没有属性marginLeft而不是cat.setAttribute('marginLeft', cat.marginLeft+10);。因此，您必须先获取计算出的样式并将其添加到样式属性中，然后您才能访问它。

Answer 2

左边距不是属性，因此在您的情况下不起作用。它是样式属性，因此您需要以不同的方式进行操作替换

cat.setAttribute('marginLeft', cat.marginLeft+10);

与

var p = cat.style.marginLeft; // return value in px; i.e 50px
p = p.substr(0,p.length-2); // remove px ie : 50px becomes 50
cat.style.marginLeft = (+p)+ 10 +'px' // convert p to number and add 10

如何使用DOM逐步增加剩余的边距

2 个答案: