DOM属性アクセス：なぜ "elt.class"が機能していないのですか？

Question

は、私はこのJavaScriptコードがあります。

var elt = document.createElement("div"); 
elt.class = "class_1"; 

を私のCSSに.class_1に関連したスタイリングがあるように思われるが、それは実際にいくつかの理由では適用されませんでした。後何が悪かったのかを考え出すの数時間を過ごした、私はこの代替を試してみました：

elt.setAttribute("class", "class_1"); 

、それが働いていた....

私のコードの他の部分で、私はelt.idを使用しているのでそれは奇妙ですそれはうまくいった。最初はクロスブラウザーの問題だと思っていましたが、"elt.class"はすべてのブラウザーで機能しませんでした。

これはネイティブのjavascript DOMのバグですか？なぜこれが何であるのか、何か間違ったことを説明できますか？ありがとう。すべての入力/回答は高く評価されます。

Answer 1

プロパティと属性は異なるものです。属性はDOM Core method getAttribute通じ、文書の任意のタイプのためにアクセス、ドキュメントのコードで参照文字列です：

<a id="foo" href="bar" tabindex="1" onclick="alert()" class="bof" potato="lemon"> 

a.getAttribute('id')   // string "foo" 
a.getAttribute('href')  // string "bar" 
a.getAttribute('tabindex') // string "1" 
a.getAttribute('onclick') // string "alert()" 
a.getAttribute('class')  // string "bof" 
a.getAttribute('potato')  // string "lemon" 

直接オブジェクトにアクセスできるプロパティは、専門的かつ文書型特有のものであるのに対し（例えばで定義されていますDOM HTMLまたはHTML5）、一般に読みやすい便利な機能です。それらは属性と同じことをしばしば反映しますが、名前、値、種類、目的などが異なる場合があります。

だから、

a.id       // string "foo" 
a.href      // string "http://www.example.com/base/bar" 
a.tabIndex     // integer 1 
a.onclick     // function() { alert(); } 
a.className     // string "bof" 
a.potato      // undefined 

id同じ値の結果、hrefおよび他のすべてのURLプロパティは、ドキュメントにabsolutised相対を取得しながら、 tabIndexなどの数値プロパティはリテラル文字列ではなく数値を返します。 onclickなどのイベントハンドラプロパティがJS関数オブジェクトを返します。名前がclassなどの共通予約語（DOMがクロスランクの標準であるためJavaScriptの予約語だけでなく）と衝突するような名前のプロパティは名前が変更されます（htmlForも参照）非標準属性はプロパティとしてアクセスできません。その他の問題：value/selected/checkedの入力は、の現在のフォームフィールドの内容を反映しています。同じ名前の属性は、defaultValue/defaultSelected/defaultCheckedの初期値です。

[別名：IE < 8は、属性とプロパティの違いを伝えるのに本当の問題があり、異なる場合はすべてgetAttributeの間違ったものを返します。これを混乱させないようにしてください。このため、HTML DOMプロパティにアクセスするためにgetAttributeを使用しないでください。]

Answer 2

"class"はJavaScriptの予約語なので、DOMはclassNameを使用して要素の現在のクラスを反映します。これは文字列形式で表されます。例："foo bar baz"（クラスfoo、barを持つ要素、およびbaz）

はそれを使用する方法の例についてはhttps://developer.mozilla.org/en/DOM/element.classNameを参照してください。

Answer 3

var elt = document.createElement("div"); 
elt.className = "class_1"; 

Answer 4

クラスは予約語です。クラス属性にアクセスするには、classNameを使用します。 elt.className = "class_1";