JavaScript className（クラス名）

概要: このチュートリアルでは、JavaScriptのclassNameプロパティを使用して、要素のCSSクラスを操作する方法を学習します。

JavaScript className入門

classNameは、要素のプロパティであり、要素のCSSクラスのスペース区切りリストを文字列として返します。

element.classNameCode language: CSS (css)

次のようなul要素があるとします。

<ul id="menu" class="vertical main">
   <li>Homepage</li>
   <li>Services</li>
   <li>About</li>
   <li>Contact</li>
</ul>Code language: HTML, XML (xml)

コンソールウィンドウにul要素のクラスが表示されます。

let menu = document.querySelector('#menu');
console.log(menu.className);Code language: JavaScript (javascript)

出力

vertical main

classNameプロパティを使用して要素に新しいクラスを追加するには、既存のクラス名と新しいクラス名を連結します。

element.className += newClassName; 

+=演算子は、newClassNameを要素の既存のクラスリストに連結します。そのため、新しいクラス名の前にスペースを付ける必要があります。

let menu = document.querySelector('#menu');
menu.className += ' new';
console.log(menu.className);Code language: JavaScript (javascript)

出力

'vertical main new'Code language: JavaScript (javascript)

実際には、要素の既存のクラスに新しいクラスを追加するには、classListを使用します。

let menu = document.querySelector('#menu');
menu.classList.add('new');
console.log(menu.className);Code language: JavaScript (javascript)

出力

'vertical main new'Code language: JavaScript (javascript)

要素のすべてのクラスを完全に上書きするには、単純な代入演算子を使用します。例えば、

element.className = "class1 class2";Code language: JavaScript (javascript)

要素のクラスの完全なリストを取得するには、classNameプロパティにアクセスする必要があります。

let classes = element.className;Code language: JavaScript (javascript)

classはJavaScriptのキーワードであるため、classの代わりにclassNameという名前が使用されます。

また、classはHTML属性です

<div id="note" class="info yellow-bg red-text">JS className</div>Code language: HTML, XML (xml)

一方、classNameは要素のDOMプロパティです。

let note = document.querySelector('#note');
console.log(note.className); Code language: JavaScript (javascript)

出力

info yellow-bg red-text

要素には、CSSクラスをより適切に操作するのに役立つclassListと呼ばれる別のプロパティがあります。

まとめ

• classNameプロパティは、要素のクラスのスペース区切りリストを文字列として返します。

クイズ