gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 11:17:17 25 4
gpt4 key购买 nike

我有一张黑猫的图片我想逐渐增加它的宽度,并使图像从左向右移动,增加它自己的左边距。我不明白为什么宽度增加并且 margin-left 显示 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);

最佳答案

尝试使用以下方法:

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

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

关于javascript - 如何使用 DOM 逐步增加剩余边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51081571/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com