Question

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

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

我在为<button>的onclick事件创建javascript时遇到问题，以便使用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'

Answer 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");

getElementsByClassName和... ByTagName，<path>和<svg>，使用onclick =“”更改样式</svg> </path>

1 个答案: