【Javascrpt】HTMLタグの「class」属性値を取得、変更する方法

HTMLタグの「class」属性値を取得・変更するには、

クラス名を取得する書式

let 変数名（Element） = document.querySelector('#ID名').className;
let 変数名（Element） = document.getElementById('ID名').className;

クラス名を指定する書式

let 変数名（Element） = document.querySelector('#ID名').className = "aaa bbb ccc";
let 変数名（Element） = document.getElementById('ID名').className = "aaa bbb ccc";

指定されているクラス名を確認する書式

クラス名がある場合は、「true」、ない場合は「false」が変数に格納される。
let 変数名 = document.getElementById('ID名').classList.contains("クラス名");

クラス名を追加する書式

HTMLタグに「class」属性値を追加するには「classList.add()」を使用する。既に「class属性値」が存在する場合には無視してくれる。

document.getElementById('ID名').classList.add("aaa");
「class属性値」を複数指定する場合は、
「第1引数,第2引数,第3引数…」
と指定する。


Back