の setAttribute() メソッドは、特定の要素に属性を設定または追加するために使用され、それに値を提供します。属性がすでに存在する場合は、属性の値を設定または変更するだけです。したがって、次のこともできます。 setAttribute() 既存の属性の値を更新するメソッド。対応する属性が存在しない場合は、指定された名前と値で新しい属性が作成されます。このメソッドは値を返しません。属性名を HTML 要素で使用すると、属性名は自動的に小文字に変換されます。
を追加することもできますが、 スタイル を使用した属性 setAttribute() ただし、スタイリングにはこの方法を使用しないことをお勧めします。スタイルを追加するには、スタイルを効果的に変更するスタイル オブジェクトのプロパティを使用できます。それは次のコードで明らかです。
間違った方法
スタイルを変更するために使用しないことをお勧めします。
element.setAttribute('style', 'background-color: blue;');
正しい方法
シングルトンデザイン
スタイルを変更する正しい方法は次のとおりです。
マイライブクリケット
element.setAttribute.backgroundColor = 'blue';
属性の値を取得するには、 get属性() メソッドを使用し、要素から特定の属性を削除するには、 削除属性() 方法。
次のようなブール属性を追加する場合 無効 、その場合、その値が何であれ、常に次のようにみなされます。 真実 。ブール属性の値を次のように設定する必要がある場合は、 間違い を使用して属性全体を削除する必要があります。 削除属性() 方法 。
構文
element.setAttribute(attributeName, attributeValue)
このメソッドの引数はオプションではありません。このメソッドを使用する場合は、両方のパラメーターを含める必要があります。このメソッドのパラメータ値は次のように定義されます。
パラメータ値
属性名： これは、要素に追加する属性の名前です。空のままにすることはできません。つまり、オプションではありません。
属性値: これは、要素に追加する属性の値です。また、オプションの値でもありません。
使い方を理解しましょう setAttribute() いくつかのイラストを使用してメソッドを説明します。
例1
この例では、 href の値を持つ属性 「https://www.javatpoint.com/」 に タグ付き id = 'リンク' 。
JavaScript setAttribute() method function fun() { document.getElementById('link').setAttribute('href', 'https://www.javatpoint.com/'); } <h2> It is an example of adding an attribute using the setAttribute() method. </h2> <a id="link"> javaTpoint.com </a> <p> Click the follwing button to see the effect. </p> Add attribute 今すぐテストしてください 出力
onclick js
上記のコードを実行すると、出力は次のようになります -
指定されたボタンをクリックする前に、リンクが作成されていないことがわかります。ボタンをクリックすると、出力は次のようになります -
これで、リンクが作成されたことがわかります。
例2
この例では、 setAttribute() 方法。ここでは、の値を変更することでテキストフィールドをボタンに変換しています。 タイプ からの属性 文章 に ボタン 。
Java チュートリアル
効果を確認するには、指定されたボタンをクリックする必要があります。
JavaScript setAttribute() method function fun() { document.getElementById('change').setAttribute('type', 'button'); } <h2> It is an example to update an attribute's value using the setAttribute() method. </h2> <p> Click the follwing button to see the effect. </p> Change 今すぐテストしてください 出力
上記のコードを実行すると、出力は次のようになります -
ボタンをクリックすると、出力は次のようになります -
例3
ここではブール属性を追加しています 無効 指定したボタンを無効にします。の値を設定すると、 無効 属性を空の文字列に設定すると、自動的に true に設定され、ボタンが無効になります。
JavaScript setAttribute() method function fun() { document.getElementById('btn').setAttribute('disabled', ''); } <h2> Example of the setAttribute() method. </h2> <p> Click the following button to see the effect </p> Click me 今すぐテストしてください 出力
ジャワで
上記のコードを実行すると、出力は次のようになります -
ボタンをクリックすると、出力は次のようになります -
