classListプロパティ

classListは要素のclass属性(DOMTokenList)を返します。classListを使うことで、要素のclass属性を簡単に操作することができます。

classListは読み取り専用のプロパティになりますが、add( )、remove( )、contains( )、toggle( )の各メソッドを利用することで、内容を変更することが可能になります。

Element: classList プロパティ - Web API | MDN

add


$element.classList.add( "className" )$

classList.addは、パラメーターで指定されたクラス名を要素のclass属性へ追加します。 パラメーターを「 ,(カンマ) 」区切りで複数指定することで、追加するclass名を複数指定することも可能です。

<div class="about box">
	<h2>ABOUT.</h2>
</div>
.hidden {
	display: none;
}
const aboutContent = doucment.querySelector( ".about" );

aboutContent.classList.add( "hidden" );   // <div class="about box hidden"> に

DOMTokenList: add() メソッド - Web API | MDN

remove