JavaScriptでCSSクラスを変更する方法
序章
このチュートリアルでは、DOM操作プロジェクトのJavaScriptclassList
オブジェクトを使用してCSSクラスを変更する方法を学習します。 classList
オブジェクトを使用すると、HTML要素に割り当てられているCSSクラスを調整できます。
前提条件
- JavaScriptの一般的な知識。 JavaScriptの詳細については、シリーズJavaScriptでコーディングする方法をご覧ください。
- CSSの一般的な知識。 CSSの概要については、チュートリアルカスケードと特異性を使用してCSSスタイルをHTMLに適用する方法を確認してください。
プロジェクトの開始
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の理解—ドキュメントオブジェクトモデルを確認してください。