setAttribute、複数の属性を一括で追加【JavaScript】。

〽️ 関数にしておくと便利。

SVGアニメーション、作り方。

静的コンテンツの枠を飛び出す。

⬆︎SVGついてのまとめページはこちら。

syntax。

for(let g of Object.entries(「「１obj」」)) { 「「５element」」.setAttribute(g[0],g[1]); }

setAttribute,１つずつしか..

こんにちは、「ふ」です。
JavaScriptで要素に属性をセットする、setAttribute( )メソッド。これ、１つだけの内容を追加するのなら便利なものです。

elm.setAttribute("onclick","func()");

しかし。複数の属性をセットしたいときには、メソッドと引数を１つ１つ記述しなくてはならない⬇︎。

elm.setAttribute("onclick","func()"); elm.setAttribute("class","classname"); elm.setAttribute("id","divname"); ・・・・💧

特にcreateElement( )で新しく要素を生成したときなどは、たくさんの属性をセットするケースが考えられます。何行にも渡って、いちいち記述するのもめんどくさいですよね。

そこで今回は「複数の内容を一括でsetAttribute( )する」方法を紹介します。
記事の後半では関数化したサンプルも貼っていますので、ぜひ役立ててください。

Objectにしてしまおう。

その方法ですが、

オブジェクトリテラルで属性と値のセットを記述しておき、ループ処理を使って一括で要素にセットする。

というものです。さっそく試してみましょう。
「onclick属性」「class属性」の２つをオブジェクトにまとめてみます。

let obj1 = ｛ bbonclick:"func1()", bbclass:"class1" bb｝;

それぞれの属性が与えられたときの効果も準備しておきます。

function func1() { alert("一括できたよ〜"); }

.class1 { font-weight:bold; background-color:#ddd; }

func1はalertを出す処理。class1では「太字＋背景色が変化する」ようにしました。

for ofとObject.entries。

それではオブジェクトの内容を、要素にsetAttributeしていきましょう。

内容を全て取り出し、配列化。

Object.entries(「「５オブジェクト」」)

はじめにプロパティと値のペアを取り出せるように、配列に変換します。
Object.entries( )は、オブジェクトのプロパティと値をすべて取り出して配列化してくれる便利なメソッドです。

先ほど用意した「obj1」にメソッドを適用し、出力してみます。

let obj1 = ｛ bbonclick:"func1()", bbclass:"class1" bb｝; console.log(「「１Object.entries(obj1)」」);

「「３▶︎ 出力結果」」 (2) [Array(2), Array(2)] 0: (2) ['onclick', 'func1()'] 1: (2) ['class', 'class1']

[プロパティ,値] のペアが配列に格納され、さらにその各ペアが配列になったものが返っています。
この配列をコードで表現すると⬇︎のようになります。

[['onclick','func1'],['class','class1']]

これでプロパティにも値に対しても、indexでアクセスできるようになりました。

for ofでループ処理。

オブジェクトの内容を配列化することができたので、for of文を使ったループ処理で一括setAttributeします。

一括でセットできるかな？

一括でセットできるかな？

要素を用意しました。id名を「ikkatu」としています。
この要素に対してループ処理してみましょう。

「「３//要素を取得」」 const ikkatu = document.getElementById("ikkatu"); 「「３//ループ処理」」 for(let i of Object.entries(obj1)) { ikkatu.setAttribute(「「１i[0]」」,「「１i[1]」」); }

配列化されたobj1の「プロパティ: 値」のペアを順に取り出し、要素にsetAttributeしています。
プロパティのindexは[0]、値のindexは[1]取得できますね。

一括でセットできるかな？

結果⬆︎です。

class属性をsetできたので、font-weightと背景色のスタイルが適用されました。
そしてonclink属性もsetできています。
実際にクリックしてみてください。アラートが表示されます。

一括setAttribute、簡単にできてしまいました ♫

for ofを使ったループ処理については、こちら⬇︎の記事で詳しく紹介しています。

for in for ofとは？〜ループ処理について。

2022.03.07
２つの違いとつかいかた。

関数定義してしまおう。

一括setAttribute。
調子にのって、いっそ関数にしてしまいましょう。

function lump_set(elm,obj) { for(let j of Object.entries(obj)) { elm.setAttribute(j[0],j[1]); } }

第１引数に要素、第２引数にオブジェクトを渡せるようにしました。

関数でもできるかな？

関数でもできるかな？

別の要素を作りました。id名は「ikkatu2」にしています。
要素を取得し、関数処理をしてみます。

const ikkatu2 = document.getElementById("ikkatu2"); lump_set(ikkatu2,obj1);

関数でもできるかな？

適用されています⬆︎。
色んな属性のセットを作っておいて、関数で一括set。
これでもっと便利になりましたね。

ロリポップ！の取次店になりました。

〽️ 「ふ」が使ってるレンタルサーバーを紹介します。

属性の一括セット。

最後までお読みくださり、ありがとうございました。

要素に対してCSSの一覧をセットするのであれば、class名を付与することで実現しますが、今回の方法を使えば、その外側の存在とも言える「属性の一括セット」が可能になります。

「Object.entriesとfor ofのセット」は、setAttribute以外にも使えそうですね。何か面白いものができたら、紹介させていただきます。

ではまた〜 ♪