希望我的问题达到标准(我研究了整个上午所以我希望我足够彻底)
我正在学习所有这些新的 html5，所以我可以使用 SVG 制作交互式绘图，<canvas>和 CSS3 使用了一点 Javascript。我正试图摆脱我做事时丑陋、冗余的功能，并很好地整理我的编码。
我在为 <button> 创建 javascript 时遇到问题的 onclick 事件以使用 document.getElementsByClassName 更改包含 SVG 中所有路径的类的样式.
我已经使用了 document.getElementById ，但我想同时影响多个路径，而不必浪费大量行来将数百个 ID 抓取到 var 或类似的东西中。
到目前为止，这是我的代码，第一个按钮有效，接下来的两个是我遇到的问题。
<head>
<style>
.pathclass {
fill:none;
stroke:#ffffff;
stroke-width:4; }
</style></head>
<body>
<button onclick="document.getElementById('pathId').style.stroke = '#000000';" />
<br />
<button onclick="document.getElementsByClassName('pathClass').style.stroke = '#000000';" />
<br />
<button onclick="document.getElementsByTagName('path').style.stroke = '#000000';" />
<svg><g><path id="pathId" class="pathclass" /></g></svg>
接下来，我想设置所有 classNames自动使用类似 document.getElementsTagName('path').className = 'pathclass' 的东西
最佳答案
当您执行 document.getElementsByClassName 时，它会返回一个 NodeList。 NodeList 类似于数组，您必须遍历它才能应用样式:
// collect all nodes with class='oldclass'
var nodes = document.getElementsByClassName('oldclass');
// loops to get each node in our NodeList
for (var i=0, length = nodes.length; i < length; i++) {
// i starts at 0 and increments with each loop (i++ increments i on each iteration)
// it won't stop until it reaches the number of nodes (i < length)
// so on the first iteration it will be nodes[0]
// which is your first element, the second time
// it will be nodes[1] which is your second, and so on
nodes[i].style.stroke = "black";
}
var paths = document.getElementsByTagName('path');
for (var i=0, length = paths.length; i < length; i++) {
paths[i].className = "newclass";
}
现在，这非常麻烦，而这正是 javascript 库发挥作用的地方。我会推荐D3.js因为它适用于 SVG。对于 D3，等效代码为:
d3.selectAll(".oldclass").style("stroke", "black");
d3.selectAll("path").attr("class", "newclass");
关于javascript - getElementsByClassName 和 …ByTagName, <path> 和 <svg>, 使用 onclick =""改变样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15555348/