0

私の質問が標準に達していることを願っています（私はこれを午前中ずっと調査したので、十分に徹底したことを願っています）

私はこの新しいhtml5をすべて学んでいるので、SVGを使用してインタラクティブな描画を作成<canvas>し、少しのJavascriptを使用してCSS3を作成できます。私は自分がやっていた醜い冗長な機能を取り除き、コーディングをうまく片付けようとしています。

<button>を使用してSVG内のすべてのパスを含むクラスのスタイルを変更するためのonclickイベントのJavaScriptの作成に問題がありますdocument.getElementsByClassName。私はすでにそれを使っていdocument.getElementByIdますが、何百ものIDをvarなどに取り込むことでいっぱいの多くの行を無駄にすることなく、一度に複数のパスに影響を与えたいと思っています。

これがこれまでの私のコードです。最初のボタンは機能し、次の2つは私が問題を抱えているものです。

<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は配列に似ており、スタイルを適用するには、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ライブラリが活躍します。SVGでうまく機能するD3.jsをお勧めします。D3の場合、同等のコードは次のようになります。

d3.selectAll(".oldclass").style("stroke", "black");
d3.selectAll("path").attr("class", "newclass");
于 2013-03-21T18:46:33.847 に答える