Caution
お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。
- トップページ
- JavaScript辞典
- HTML要素.setAttribute()
HTML要素.setAttribute()対応: DOM Level 1（1998）
HTML要素に指定した属性を設定します。属性がすでに存在する場合は値が上書きされ、存在しない場合は新しく追加されます。
構文
element.setAttribute("属性名", "値");
引数
| 引数 | 概要 |
|---|---|
| 属性名 | 設定したい属性の名前を文字列で指定します。 |
| 値 | 属性に設定する値を文字列で指定します。 |
サンプルコード
<a id="link" href="#">リンク</a> <img id="photo" src="" alt="">
var link = document.querySelector("#link");
// 既存の属性を上書きします。
link.setAttribute("href", "https://example.com");
// 新しい属性を追加します。
link.setAttribute("target", "_blank");
link.setAttribute("data-type", "external");
// 画像のsrcを設定します。
var img = document.querySelector("#photo");
img.setAttribute("src", "/img/photo.jpg");
img.setAttribute("alt", "風景写真");
実行結果
上記のコードを実行すると、HTMLは以下のように変化します。
<!-- 実行前 --> <a id="link" href="#">リンク</a> <img id="photo" src="" alt="">
<!-- 実行後 --> <a id="link" href="https://example.com" target="_blank" data-type="external">リンク</a> <img id="photo" src="/img/photo.jpg" alt="風景写真">
既存の属性（『href』『src』『alt』）は値が上書きされ、存在しなかった属性（『target』『data-type』）は新しく追加されています。
概要
『HTML要素.setAttribute()』はHTML要素の属性を設定するメソッドです。属性が存在しない場合は新規に追加され、すでに存在する場合は値が上書きされます。
属性の値を取得したい場合は『HTML要素.getAttribute()』を、削除したい場合は『removeAttribute()』を使用してください。
なお、『class』属性を操作する場合は『setAttribute("class", "...")』よりも『HTML要素.classList』を使用する方が安全です。『HTML要素.setAttribute()』で『class』を設定すると既存のクラスがすべて上書きされてしまいます。
『HTML要素.setAttribute()』はチュートリアル記事『id名で要素を特定してその属性を操作してみよう』で、より詳しく解説しています。良ければご覧下さい。
記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。
シェアする