序章

このチュートリアルでは、DOM操作プロジェクトのJavaScriptclassListオブジェクトを使用してCSSクラスを変更する方法を学習します。 classListオブジェクトを使用すると、HTML要素に割り当てられているCSSクラスを調整できます。

前提条件

プロジェクトの開始

index.htmlファイルを作成し、CSSクラスを含むstyleタグと、idを含む段落要素を含めます。

[label index.html] 
<style>
  .colorText {
    color: purple;
  }

  .boldText {
    font-weight: bold;
  }

  .bigText {
    font-size: 35px;
  }
</style>

<p id="myText">
  Hello World! 
</p>

次に、classListプロパティを使用してテキストを変更し、CSSクラスを適用しましょう。

.add()および.contains()classListメソッドの使用

index.jsファイルを作成し、段落要素への参照を取得して、classList.add()メソッドを呼び出します。

[label index.js] 
const myText = document.getElementById('myText');

myText.classList.add('colorText');

組み込みのclassList.add()メソッドは、HTML要素にクラスを適用します。 この場合、段落要素のテキストは紫色で表示されます。

classList.contains()メソッドを使用してブール値を返すことで、CSSクラスが段落要素に存在するかどうかを確認することもできます。

[label index.js] 
const myText = document.getElementById('myText');

console.log(myText.classList.contains('colorText')); // true

CSSクラスcolorTextが段落要素に存在するため、呼び出しはtrueを返します。

.item()および.remove()classListメソッドの適用

index.jsファイルで、段落要素にCSSクラスを追加します。

index.js
const myText = document.getElementById('myText');

myText.classList.add('boldText');
myText.classList.add('bigText');
console.log(myText.classList); // ['colorText', 'boldText', 'bigText'];

classListプロパティは、追加の各クラスを配列に格納します。 myText.classListをコンソールアウトすると、CSSクラスを含む配列が出力されます。

配列内の各CSSクラスの指定されたインデックスを確認するには、classList.item()メソッドを呼び出します。

index.js
const myText = document.getElementById('myText');

myText.classList.item('boldText'); // 2

CSSクラスを削除するには、classList.remove()メソッドを使用します。

[label index.js] 
const myText = document.getElementById('myText');

myText.classList.remove('bigText');
console.log(myText.classList); // ['colorText', 'boldText'];

myText.classListをコンソールアウトすると、削除したCSSクラスは配列に表示されず、段落要素に適用されません。

CSSクラスを追加、確認、削除できるようになったので、他のclassListメソッドを増幅する方法を見てみましょう。

classList.toggle()メソッドの処理

classList.add()とclassList.remove()を同時に呼び出す代わりに、classList.toggle()メソッドを利用できます。

これを実現するには、index.jsファイルのボタンにイベントリスナーを実装します。

[label index.js] 
textButton.addEventListener('click', () => {
  myText.classList.toggle('newFont');
});

クリックするたびに、classList.toggle()はCSSクラスがclassList配列に存在しない場合は追加し、trueを返します。 CSSクラスが存在する場合、メソッドはクラスを削除し、falseを返します。

[label index.js] 
const anotherClass = myText.classList.toggle('newSize');

console.log(anotherClass); // true --> class was added

classList.toggle()メソッドのオプションの2番目の引数としてブール値を追加することもできます。 これにより、2番目の引数の評価方法に応じて、CSSクラスが追加または削除されます。

index.js
const bool = false; 

let firstToggle = myText.classList.toggle('newSize', bool);
console.log(firstToggle);
// false, 'newFont' already exists and will remove from classList array

let secondToggle = shadesEl.classList.toggle('newColor', !bool);
console.log(secondToggle);
// true, 'newColor' does not exist and will add the class

classList.toggle()メソッドは、CSSクラスが配列に存在するかどうかに関係なく、コード行が短い配列の追加と削除をサポートします。

結論

classListプロパティを使用すると、JavaScript内でHTML要素とそのCSSクラスを変更するためのパフォーマンスと機能が向上します。

詳細については、記事 DOM の属性、クラス、およびスタイルを変更する方法と電子書籍 DOMの理解—ドキュメントオブジェクトモデルを参照してください。