HTML要素.setAttribute()

element.setAttribute("属性名", "値");

sample_setAttribute.html

<a id="link" href="#">八神庵の情報</a>
<img id="avatar" src="" alt="">
<button id="btn">送信</button>
<input id="input" type="text">

sample_setAttribute.js

// パターン1: 既存の属性を上書きする
var link = document.getElementById("link");
link.setAttribute("href", "https://yagami.example.com");
console.log(link.getAttribute("href")); // 『https://yagami.example.com』と出力されます。

// パターン2: 新しい属性を追加する
link.setAttribute("target", "_blank");
link.setAttribute("data-character", "iori-yagami");

// パターン3: 画像のsrcとaltを設定する
var avatar = document.getElementById("avatar");
avatar.setAttribute("src", "/img/iori.jpg");
avatar.setAttribute("alt", "八神庵");
avatar.setAttribute("width", "200");

// パターン4: ボタンを無効化する
var btn = document.getElementById("btn");
btn.setAttribute("disabled", "true");

// パターン5: inputの型と初期値を設定する
var input = document.getElementById("input");
input.setAttribute("type", "email");
input.setAttribute("placeholder", "kyo@kusanagi.example.com");
input.setAttribute("maxlength", "50");

サンプルページはこちら

『HTML要素.setAttribute()』はHTML要素の属性を設定するメソッドです。属性が存在しない場合は新規に追加され、すでに存在する場合は値が上書きされます。

属性の値を取得したい場合は『HTML要素.getAttribute()』を、削除したい場合は『removeAttribute()』を使用してください。

なお、『class』属性を操作する場合は『setAttribute("class", "...")』よりも『HTML要素.classList』を使用する方が安全です。『HTML要素.setAttribute()』で『class』を設定すると既存のクラスがすべて上書きされてしまいます。

『HTML要素.setAttribute()』はチュートリアル記事『id名で要素を特定してその属性を操作してみよう』で、より詳しく解説しています。良ければご覧下さい。