JavaScriptでclass属性を取得・変更する

class属性

HTMLにおけるclass属性は、スタイルシート（CSS）の適用対象として指定したり、スクリプト（JavaScript）の参照先として指定したりといった用途に使用されます。

同じ文書に同じclass属性を複数指定することが可能で、同一要素に複数のclass属性を指定することも可能です。

JavaScriptでclass属性を操作する方法

ここからは以下のHTMLコードに対して、JavaScriptを使ってclass属性を取得・変更していきます。

<p class="one two three" id="target">ターゲット要素</p>

class属性を取得する

class属性を取得する場合は、classListプロパティを参照します。

const target = document.getElementById('target');

const classList = target.classList();

console.log(classList);

// one two three

class属性を変更する

class属性を変更する場合は、classListプロパティに値を指定します。

変更前のclass属性は全て削除されますので注意しましょう。

const target = document.getElementById('target');

target.classList('four five');

console.log(target);

// <p class="four five" id="target">ターゲット要素</p>

class属性を追加する

class属性を追加する場合は、classList.add()を利用します。

const target = document.getElementById('target');

target.classList.add('four');

console.log(target);

// <p class="one two three four" id="target">ターゲット要素</p>

class属性を削除する

class属性を削除する場合は、classList.remove()を利用します。

const target = document.getElementById('target');

target.classList.remove('two');

console.log(target);

// <p class="one three" id="target">ターゲット要素</p>

class属性を切り替える

class属性を切り替える（あれば削除、なければ追加する）場合は、classList.toggle()を利用します。

const target = document.getElementById('target');

target.classList.toggle('three four');

console.log(target);

// <p class="one two four" id="target">ターゲット要素</p>

class属性を置換する

class属性を置換する場合は、classList.replace()を利用します。

第一引数に置換対象のclass属性を、第二引数に置換後のclass属性を指定します。

const target = document.getElementById('target');

target.classList.replace('three', 'four');

console.log(target);

// <p class="one two four" id="target">ターゲット要素</p>

指定したclass属性が存在するか判定する

指定したclass属性が存在するか判定する場合は、classList.contains()を利用します。

存在する場合はtrueが、存在しない場合はfalseが返ります。

const target = document.getElementById('target');

const isContained = target.classList.contains('three');

console.log(isContained);

// ture