SetAttribute（W3C DOM Core Method）

を返します

void

スロー

invalid_character_err、no_modification_allowed_err

キーテイクアウト

• JavaScriptのSetAttributeメソッドにより、開発者はHTML要素に属性とその値を追加、変更、または更新できます。ドキュメントオブジェクトモデル（DOM）の一部であり、属性名とその値の2つのパラメーターが必要です。
SetAttributeメソッドは大文字と小文字を区別し、CSSスタイルとカスタムデータ属性を変更するために使用できます。ただし、イベントハンドラーの場合、setAttributeではなくAddEventListenerメソッドを使用することをお勧めします。
• setAttributeでラクダに覆われた名前を使用する場合は注意してください。また、値を設定する場合、値は解析されません。つまり、エンティティ参照またはその他のマークアップはリテラルテキストとして扱われます。
• 例

上記の例は、要素上の値を持つrel属性を設定します。

element.setAttribute('rel', 'me');

したがって、問題の要素がこのhtmlである場合：

上記の操作はこれにつながります：

<a href="http://www.brothercake.com/">brothercake</a>

引数

<a href="http://www.brothercake.com/" rel="me">brothercake</a>

name

（domstring） 必須

属性の名前 作成または変更します。

値

（domstring） 必須

の文字列値 属性。

説明

この要素に指定された名前と値を含む新しい属性を設定します。

指定された名前で属性が既に存在する場合、その値は置き換えられます。

値を設定する場合、値は解析されないため、エンティティ参照またはその他のマークアップはリテラルテキストとして扱われます。エンティティを含む属性を作成するために、仕様は子供として適切なテキストとエンティティリファレンスノードを持つ属性ノードを作成することを提案し、それをSetattributenodeを使用して要素に追加しますが、実際にはこれはめったに機能しません（詳細についてはAttrを参照）。

この方法は、非名目上の属性を操作するためのものです。名前の属性を追加するには、代わりにdom 2 setattributensメソッドを使用します。

ラクダに覆われた属性名

には注意してください

XHTMLモードのOperaでは、キャメルを覆った名前で属性を設定すると、対応するDOMプロパティに影響する可能性があるため、すべてのブラウザ向けのコードでラクダに覆われた名前を使用することに注意する必要があります。たとえば、tabindexという属性を任意の値に設定すると、tabindexプロパティを0（そのデフォルト値）にリセットし、元のtabindex属性を完全に削除し、tabindexという名前と名前で新しい属性を作成する効果があります。指定された文字列値

この動作は、おそらくXHTMLモードでケース感受性がどのように処理されるかについての矛盾にかかっています。これを行う他のブラウザ（FirefoxおよびSafari）では、Tabindexと呼ばれる新しい属性が作成され、元のTabindex属性とその対応するTabindexプロパティは変更されていません。

このメモはXHTMLモードでこれらのブラウザにのみ適用されます - HTMLモード2では、名前引数はケース非感受性であるため、TabindexはTabindexとして扱われます。

さらに、HTMLのIEは、入力要素の型属性を設定することはできません。そうしようとすると、エラーがスローされます（このコマンドはサポートされていません）。また、スタイル属性を設定することはできません（そうすることでは効果がありません）、イベント処理属性を文字列として設定することはできません（その要素がすでに同じ名前のイベント処理属性を持っていない限り、そうするためには効果はありません。新しいものを設定する操作は古いものを削除し、何も残しません。その後、Getattributeは設定された文字列値を返しますが、実際には要素にアクティブなイベントハンドラーはありません）。ただし、文字列ではなく、関数が値引数として渡される場合、イベント処理属性を設定できます。

最後に、この方法を使用して画像のSRC属性を設定する場合、その後GetAttributeから返される値は完全に適格なURIになります。これは、静的HTMLで設定されているSRCを取得するときの動作と同じです。ただし、リンクのHREFを設定する場合、その後返される値は、設定された文字通りの値になります。これは、値が資格のあるURIとして返される静的HTMLを使用した動作とは異なります。

それが機能するかどうかを知るにはどうすればよいですか？

element.setAttribute('rel', 'me');

このメソッドが期待どおりに機能するかどうかを確立することは特に困難です。これは、任意の名前の属性をまったく設定することができるからです。たとえば、Internet Explorerでは、クラスと呼ばれる属性を設定し、その後GetAttribute（ 'class'）でそれを取得することができますが、クラス名プロパティには対応しません。要素。

すべてのブラウザでは、ブール値（無効など）を評価する属性は、trueにのみ設定できます。これは正しい動作であり、そのような属性には1つの可能な値（すなわち、無効=「無効」）のみが必要であるか、定義されていないためです（したがって、それらを否定することは、removeattributeで行う必要があります）。 Opera 9.5では、FirefoxとSafariでは、属性値はその後Falseとして戻りますが、要素はまだ無効になり、Opera 9.0では、値は無効になり、インターネットエクスプローラーではBoolean Trueとして戻り続けます。これらは、たとえそれらが少し混乱していても、要素の状態の正確な反射です！ただし、IEはこれらの属性が実際のブール値を持っていると考えているため、弦ではなくブール値として設定することにより、値を切り替えて（およびそれに応じて無効にして有効にすることができます）。

Internet Explorerは、値0（ケース非感受性）または1（デフォルト、ケースセンシティブ）を取得できるケース感度フラグであるSetAttributeの2番目の引数を実装しています。この引数は、IEで期待どおりに機能し、他のブラウザには影響しません。

element.setAttribute('rel', 'me');

setAttribute w3c dom Coreメソッドに関するよくある質問

javascriptのsetAttributeメソッドは何ですか？属性が存在しない場合はどうなりますか？存在すると、SetAttributeメソッドは指定された値で作成します。これが、SetAttributeが非常に強力である理由の1つです。開発者は、HTML要素に属性を動的に追加できるようになります。はい、setAttributeはカスタムデータ属性で使用できます。これは、視覚的表現のない追加の情報を保存する必要がある場合に特に便利です。属性名を「data」で接頭することを忘れないでください。HTML5標準に準拠するために。これは、「クラス」と「クラス」が2つの異なる属性として扱われることを意味します。属性を操作するときに正しいケースを使用することを常に確認してください。はい、SetAttributeの代替手段があります。たとえば、HTML要素のプロパティを直接変更できます。これは、多くの場合、SetAttributeを使用するよりもシンプルで直感的です。ただし、SetAttributeには、カスタムデータ属性を含む任意の属性を操作できるという利点があります。

以上がSetAttribute（W3C DOM Core Method）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。