序章
このチュートリアルでは、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クラスを追加します。
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()
メソッドを呼び出します。
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クラスが追加または削除されます。
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の理解—ドキュメントオブジェクトモデルを参照してください。