web-dev-qa-db-ja.com

JavaScriptを使用してHTML要素に属性を追加/更新する方法は？

JavaScriptを使用して属性を追加/更新する方法を見つけようとしています。 setAttribute()関数でできることは知っていますが、IEでは機能しません。

javascripthtmlcross-browser
119
dev.e.loper

IEを含む多くの異なるブラウザーでの属性の動作について here を読むことができます。

IEであっても、element.setAttribute()でうまくいくはずです。やってみた？動作しない場合は、element.attributeName = 'value'が動作している可能性があります。

155
andi

完全に互換性を確保したい場合、簡単に思えるのは実際には注意が必要です。

var e = document.createElement('div');

追加する 'div1'のidがあるとします。

e['id'] = 'div1';
e.id = 'div1';
e.attributes['id'] = 'div1';
e.createAttribute('id','div1')

しかし、当然ながら偶然もあります。 8：e.attributes['style']より前のIEでは機能しませんが、エラーにはなりませんが、実際にはクラスを設定しません。className：e['class']でなければなりません。
ただし、属性を使用している場合、これは機能します：e.attributes['class']

要約すると、属性はリテラルでオブジェクト指向であると考えてください。

文字通り、x = 'y'を吐き出し、それについて考えないようにするだけです。これが、属性setAttribute、createAttributeの目的です（IEのスタイルの例外を除く）。しかし、これらは本当にオブジェクトなので、混乱する可能性があります。

JQuery innerHTMLスロップの代わりにDOM要素を適切に作成する手間がかかるので、私はそれを1つのように扱い、e.className = 'fooClass'およびe.id = 'fooID'に固執します。これは設計上の優先事項ですが、この例では、オブジェクトを処理しようとすることは、オブジェクトがユーザーに対して機能すること以外のものとして扱われます。

クラスがclassNameであり、スタイルがオブジェクトであることに注意するだけで、他のメソッドのように逆効果になることはありません。したがって、style = "width：50px"ではありません。 tagNameも覚えておいてください。ただし、これはcreateElementによってすでに設定されているので、心配する必要はありません。

これは私が望んでいたよりも長かったが、JSでのCSS操作は扱いにくいビジネスである。

34
JPearce

必須 jQueryソリューション 。 title属性を検索して、fooに設定します。 IDで実行しているため、これは単一の要素を選択しますが、セレクターを変更することでコレクションに同じ属性を簡単に設定できます。

$('#element').attr( 'title', 'foo' );
29
tvanfosson

属性で何をしたいですか？それはhtml属性ですか、それとも独自のものですか？

ほとんどの場合、単純にプロパティとしてアドレスすることができます：要素にタイトルを設定したいですか？ element.title = "foo"がそれを行います。

独自のカスタムJS属性の場合、DOMは自然に拡張可能です（expando = trueとも呼ばれます）。その簡単な結果は、element.myCustomFlag = fooを実行して問題なく読み取ることができることです。

7
annakata