0

希望我的问题符合标准（我整个早上都在研究这个，所以我希望我足够彻底）

我正在学习所有这些新的 html5，所以我可以使用 SVG<canvas>和 CSS3 使用一点 Javascript 制作交互式绘图。我试图摆脱我做事的丑陋、冗余的功能，并很好地整理我的编码。

我在为<button>的 onclick 事件创建 javascript 以更改包含 SVG 中所有路径的类的样式时遇到问题document.getElementsByClassName。我已经可以使用它了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'

4

1 回答 1

1

当你这样做时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");
于 2013-03-21T18:46:33.847 回答