JavaScript坚持从超文本标记语言访问样式元素
我正在编写一个程序，用于在加载时更改SVG元素的x值(最终目的是成为映射程序的一部分)。我的代码在尝试访问每个元素的特定值时被卡住了，我不确定为什么。
代码如下：
<html>
<body>
<svg width="12cm" height="12cm" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
<rect id="a" x="40" y="180" width="30" height="30" fill="#000"/>
<rect id="b" x="100" y="180" width="30" height="30" fill="#000"/>
<rect id="c" x="160" y="180" width="30" height="30"
fill="#000"/>
<rect id="d" x="220" y="180" width="30" height="30" fill="#000"/>
</svg>
<script>
var array1 = [a, b, c, d];
array1.forEach(function(element) {
console.log(element);
var xValue = document.getElementById(element).style.x;
xValue = xValue * 2;
document.getElementById(element).style.x = xValue;
console.log("done");
});
</script>
</body>
</html>我可以断定JavaScript正在访问SVG中的信息，因为控制台使用数组中的ID记录了整个元素。但是，我也可以看出，JavaScript在尝试访问元素的特定属性时被卡住了，因为控制台只记录代码的第一行，而且只记录数组中的第一个元素。
最终，应该发生的是，JavaScript从数组中获取一个ID，访问该元素，访问该元素的某些属性(在本例中为x值)，对该属性执行转换，并对其进行更改(因此，如果此操作有效，则每个SVG元素的x位置将偏移2倍)。
我确信这里的问题出在我的语法上，但是我不太明白为什么。我试着使用.innerHTML，但没有任何帮助。这里有一个CodePen来看看它的实际效果。如果您打开控制台，您可以看到第一行日志：https://codepen.io/anon/pen/GBqNrK?editors=1111
谢谢你的帮助。
回答 1
Stack Overflow用户
发布于 2018-07-23 22:27:26
多亏了来自Pointy的提示和一些快速的调试，我已经弄清楚了！
以下是解决方案:首先，没有理由使用.getElementById()，因为我已经访问了元素。我还必须使用.getAttribute()而不是.style.x，将*更改为=*，并使用.setAttribute("x", xValue)更改该值。
下面是最终的功能代码：
<html>
<body>
<svg width="12cm" height="12cm" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
<rect id="a" x="40" y="180" width="30" height="30" fill="#000"/>
<rect id="b" x="100" y="180" width="30" height="30" fill="#000"/>
<rect id="c" x="160" y="180" width="30" height="30"
fill="#000"/>
<rect id="d" x="220" y="180" width="30" height="30" fill="#000"/>
</svg>
<script>
var array1 = [a, b, c, d];
array1.forEach(function(element) {
console.log(element);
var xValue = element.getAttribute("x");
console.log(xValue);
xValue *= 2;
console.log(xValue);
element.setAttribute("x", xValue);
console.log(xValue);
console.log("done");
});
</script>
</body>
</html>使用大量用于调试的console.log()，代码在哪里停止以及值是如何变化的。
下面是一个显示程序工作的代码：https://codepen.io/anon/pen/GBqNrK?editors=1111
希望这最终能对某些人有所帮助！
https://stackoverflow.com/questions/51480724
复制相似问题
腾讯云开发者
