イベントを実行した時に新たに属性を追加したい！変更したい！時に使えるのがsetAttributeメソッドです。
setAttributeメソッドとは？
先ほども触れましたが、setAttributeは指定した要素に新たに属性を追加したり、既存の要素の属性を変更したりする構文です。
基本構文
setAttributeの基本構文は以下の通りです。
要素.setAttribute('属性名', '属性値');setAttribute使い方
属性を追加する
まずは、属性を新たに追加する場合を見ていきます。
下記の要素に対して、setAttributeを使って属性を追加する場合は下記の通りです。
<input id="sample" name="text">//input要素を取得
let sample = document.getElementById('sample')
//setAttributeでclass属性を追加
sample.setAttribute('class','sam');element.setAttribute(‘class’,’sam’);によってclassを追加しています。
console.logで確認してみるとちゃんとclassが追加されています。↓
<input id="sample" name="text" class="sam">属性を変更する
次は、属性を変更する場合です。変更する場合も同様の手順です。
<input id="sample" name="text">let sample = document.getElementById('sample')
sample.setAttribute('id','sample2');上記のように指定することで、id名が上書きされ、下記のように変更されます。↓
<input id="sample2" name="text">
