JS クラスを管理する方法 classList と element.style の使い方

今回は、JavaScriptで「クラスを管理する方法」を見ていきます。

CSSについて忘れてしまっている方もいらっしゃると思いますので、ぜひHTMLとCSSで簡単なサイトを作成して一緒に操作しながら学習してください。

className
1. クラス属性値を取得
2. クラス属性値を変更
classList
スタイルの設定
1. element.style
2. getComputedStyle
あとがき

className

「className」プロパティは、クラス属性値を取得します。

クラス属性値を取得

HTML

<div class="sample"></div>

let nameClass = document.querySelector('div');

console.log(nameClass.className);

sample

クラス属性値を変更

let nameClass = document.querySelector('div');
nameClass.className += ' newsample';
console.log(nameClass.className);

newsample

属性値を追加する場合は、「nameClass.className += ‘ newsample’;」と書きます。

classList

「classList」プロパティは、属性値を参照、追加、削除することが出来ます。

以下のメソッドを伴って使用します。

メソッド	意味
add	クラスを追加
remove	クラスを削除
toggle	クラスが存在する場合は削除なければ追加
replace	クラスを置き換える
contains	クラスが含まれているか確認 true、falseで返す

add

let nameClass = document.querySelector('div');
nameClass.classList.add('newsample');

console.log(nameClass);

div.sample.newsample

属性値に、「newsample」が追加されました。

remove

nameClass.classList.remove('sample');
console.log(nameClass);

<div class="newsample"></div>

属性値「sample」が削除されました。

toggle

HTML
<div class="sample newsample"></div>

let nameClass = document.querySelector('div');
nameClass.classList.toggle('sample');

console.log(nameClass);

<div class="newsample"></div>

属性値「sample」が削除されました。

let nameClass = document.querySelector('div');
nameClass.classList.toggle('sample2');

console.log(nameClass);


<div class="sample newsample sample2"></div>

属性値「sample2」は存在していなかったので、追加されました。

replace

let nameClass = document.querySelector('div');
nameClass.classList.replace('sample', 'sample1');

console.log(nameClass);

<div class="sample1 newsample"></div>

属性値「sample」が「sample1」に書き換えられました。

「classList.replace(変更する属性値, 新しい属性値）」で記述します。

contains

HTML
<div class="sample newsample"></div>

let nameClass = document.querySelector('div');

console.log(nameClass.classList.contains('sample'));

console.log(nameClass.classList.contains('sample1'));

true
false

属性値「sample」は存在するので「true」が、「sample1」は存在しないので「false」が返ります。

スタイルの設定

element.style

「element.style」は、スタイルプロパティに値を設定します。

let element = document.getElementById('sector1');
element.style.color = 'red';

プロパティ名は、キャメルケースで記述します。

floatは記述方法が違うので注意してください。

margin-top = marginTop
text-align = textAlign
float-left = cssFloatLeft

element.style.color = null;

「null」を指定するとリセットすることが出来ます。

element.style.fontSize = '20px';

サイズを指定する時は、「20px」と単位まで記述する必要があります。

getComputedStyle

「getComputedStyle」メソッドは、スタイルを取得します。

このメソッドは読み取り専用です。

let styleType = getComputedStyle(element);

console.log('color' + styleType.color);
console.log('font-size' + styleType.fontSize);

color:rgb(255, 0, 0)
font-size:20px