gpt4 book ai didi

javascript - 如何使用 javascript 移动这个圆圈?

转载 作者:太空宇宙 更新时间:2023-11-04 14:14:14 24 4
gpt4 key购买 nike

我是 HTML、CSS 和 Javascript 的新手。我正在尝试制作一个小圆圈,每次单击它时,它都会向右移动 10 像素。我尝试编写这段简短的代码:

function moveit() {
document.getElementById("circle").style.cx += "10px";
};
<svg width="500px">
<circle id="circle" cx="10px" cy="10px" r="5px" onclick="moveit()" />
</svg>

通过编写上面的代码,我试图在每次单击圆圈时向 cx 添加 10px。但是似乎无法将 10px 添加到 cx。我需要知道如何以正确的方式做到这一点。谢谢!

最佳答案

首先,cx是HTML元素的一个属性。因此,使用 getAttribute()setAttribute() 相应地检索和分配属性值。在您的情况下,要检索值:

var cx = document.getElementById("circle").getAttribute("cx");

此外,我还添加了一些正则表达式,它从 cx 属性中去除非数字字符,并将其转换为 int,然后再将其递增 10:

cx = parseInt(cx.replace(/\D/g,'')) + 10;

最后,将新的属性值分配给元素:

document.getElementById("circle").setAttribute("cx", cx);

综合起来:

<script>
function moveit() {
var circle = document.getElementById("circle");
var cx = circle.getAttribute("cx");
cx = parseInt(cx.replace(/\D/g,'')) + 10;
circle.setAttribute("cx", cx);
};
</script>
<body>
<svg width="500px">
<circle id="circle" cx="10px" cy="10px" r="5px" onclick="moveit()"/>
</svg>
</body>

Working JS Fiddle

关于javascript - 如何使用 javascript 移动这个圆圈?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31827562/

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