JavaScriptでsetAttributeを使用する方法

多くの場合、JavaScript でさまざまな属性を Element に動的に追加する必要がありますが、これはブラウザの互換性の問題を伴う setAttribute() を使用することで実現できます。

setAttribute(string name, string value): 指定された名前と値を持つ新しい属性を追加するか、既存の属性を指定された値に設定します。

1. スタイルの問題

setAttribute("class", value) のクラスは、「class」属性の変更を参照するため、引用符で囲む必要があります。

vName は、スタイルに値を割り当てることを表します。

例:

var input = document.createElement("input");

input.setAttribute("type", "text");

input.setAttribute("name", "q");

input.setAttribute("class",bordercss);

出力時: 、つまり、入力コントロールには bordercss スタイル属性があります

注: クラス プロパティは W3C DOM で重要な役割を果たしますが、ブラウザーの違いにより依然として存在します。

setAttribute("class", vName) ステートメントを使用して Element のクラス属性を動的に設定することは、Firefox では機能しますが、IE では機能しません。 IE コアを使用するブラウザは「class」を認識しないため、代わりに「className」を使用する必要があります

同様に、Firefox も「className」を認識しません。したがって、一般的に使用される方法は両方を使用することです:

element.setAttribute("class", value); //for firefox

element.setAttribute("className", value); //for IE

2。属性などのメソッドの問題

例:

var bar = document.getElementById("testbt");

bar.setAttribute("onclick", "javascript:alert('This is a test!');") ;

ここでは、setAttributeを使用してeのonclick属性を指定していますが、シンプルで分かりやすいです。

ただし、IE は setAttribute 関数をサポートしていないのではなく、オブジェクト属性、コレクション属性、イベント属性などの特定の属性を設定するための setAttribute の使用をサポートしていません。スタイルと onclick 属性を設定するための setAttribute は IE では機能しません。

さまざまなブラウザとの互換性を実現するために、ドット表記法を使用して、Element のオブジェクト プロパティ、コレクション プロパティ、イベント プロパティを設定できます。

document.getElementById("testbt").className = "bordercss";

document.getElementById("testbt").style.cssText = "color: #00f;";

document.getElementById("testbt") .style.color = "#00f";

document.getElementById("testbt").onclick= function () {alert("これはテストです!") }