この投稿では、JavaScript を使用して HTML 要素に複数の属性を設定する手順を説明します。
JavaScript を使用して要素に複数の属性を設定する方法は?
要素に複数の属性を同時に設定するには、まず、属性名と値を持つオブジェクトを作成します。オブジェクトのキーのリストを配列として取得します。 Object.keys() 」メソッドを使用して、指定された HTML 要素のすべての属性を「 setAttribute() ' 方法。
構文
指定された構文は setAttribute() メソッドに使用されます。
エレメント。 setAttribute ( 属性名、属性値 ) ;
上記の構文には、次の 2 つのパラメーターが含まれています。 名前 ' と ' 価値 」。
- 「 属性名 」は、新しい属性の名前です。
- 「 属性値 」は新しい属性の値です。
- このメソッドは、新しい属性を作成し、それに値を割り当てます。指定された属性がすでに存在する場合、その値が更新されます。
Object.keys() メソッドに指定された構文を使用します。
物体 . キー ( 物体 )指定されたオブジェクトの配列を返します。
例 1: forEach() メソッドと setAttribute() メソッドを使用して要素に複数の属性を設定する
まず、HTML ファイルに要素を作成します。
< ボタン ID = 'ボタン' > Linuxヒント ボタン >現在、Web ページは次のようになります。
JavaScript コードでは、まず「」という名前のオブジェクトを作成します。 要素属性 」を選択し、名前と値を持つ属性をオブジェクトに追加します。ここでは、スタイル属性、要素の名前、およびボタン要素の無効化プロパティを追加します。
定数 要素属性 = {スタイル : '背景色: rgb(153, 28, 49);色: 白;' 、
名前 : 「リナックスボタン」 、
無効 : '' 、
} ;
ここで、「」という名前の関数を定義します setMultipleAttributesonElement 」最初に「 Object.keys() 」 オブジェクトのキーの配列を取得するためのメソッドを使用し、「 forEach() 」メソッドを使用して配列を反復処理し、最後に「 setAttribute() 」メソッドを使用して、指定された HTML 要素にすべての定義済み属性を設定します。
関数 setMultipleAttributesonElement ( 要素、要素属性 ) {物体 . キー ( 要素属性 ) . forEach ( 属性 => {
エレメント。 setAttribute ( 属性、elemAttributes [ 属性 ] ) ;
} ) ;
}
「 getElementById() ' 方法：
定数 ボタン = 資料。 getElementById ( 'ボタン' ) ;定義された関数を呼び出します “ setMultipleAttributesonElement 」そして、最初の引数として要素を渡し、2 番目の引数として属性のオブジェクトを渡します。
setMultipleAttributesonElement ( ボタン、要素属性 ) ;出力は、ボタンの複数の属性が正常に追加されたことを示しています。
属性用に別のオブジェクトを作成せずに、要素に複数の属性を設定することもできます。これを行うには、以下の例に従います。
例 2: for ループと setAttribute() メソッドを使用して要素に複数の属性を設定する
JavaScript ファイルで 2 つのパラメータを持つ関数を定義し、for ループを使用して「 setAttribute() ' 方法：
関数 setMultipleAttributesonElement ( 要素、要素属性 ) {為に ( let i in elemAttributes ) {
エレメント。 setAttribute ( i、elemAttributes [ 私 ] ) ;
}
}
割り当てられた ID を使用してボタンを取得します。
定数 ボタン = 資料。 getElementById ( 'ボタン' ) ;ボタン要素と複数の属性を名前と値のペアの形式で渡すことにより、定義された関数を呼び出します。
setMultipleAttributesonElement ( ボタン、 { 'スタイル' : '背景色: rgb(153, 28, 49); 色: 白;' 、 '無効' : '' 、 '名前' : 「リナックスボタン」 } ) ;出力
JavaScript を使用して HTML 要素に複数の属性を設定することに関連する重要な情報をすべてまとめました。
結論
JavaScript の定義済み setAttribute() 」メソッドは、要素に単一または複数の属性を設定するために使用されます。要素に複数の属性を設定するには、まず、名前と値の形式で属性を含むオブジェクトを作成します。 「を使用して、配列内のオブジェクトのキーを取得します。 Object.keys() 」メソッドを使用して、指定した要素のすべての属性を「 setAttribute() ' 方法。この投稿では、JavaScript を使用して HTML 要素に複数の属性を設定する手順を説明しました。