JavaScript

classListのadd・removeでクラス名を追加・削除する【JavaScript】

この記事ではclassListを使ってclass名を追加削除していきます。

使うのは、classList.addclassList.removeです。

classList

classListはclass属性を扱います。

classListのメソッドとして、add、remove、item、toggle、contains、replaceなどがあります。

この記事ではadd、removeを取り上げます。

classList.add

element.classList.addという形式で使います。

デモ

実行をクリックするとイベントが発火し、classList.addが実行されます。

サンプルコード

#targetにクラス名「sample」を追加しています。クラス名sampleは、color:redなので文字色が変わります。

function addClass () {
	var target = document.getElementById('target');
	target.classList.add('sample');
}
<div id="target">ターゲット</div>
<button onclick="addClass();">実行</button>
.sample {
  color: red;
}

classList.remove

element.classList.removeという形式で使います。

デモ

サンプルコード

#targetにあるクラス名「sample」を削除しています。クラス名sampleは、color:redなので文字色が変わります。

function removeClass () {
	var target = document.getElementById('target');
	target.classList.remove('sample');
}
<div id="target" class="sample">ターゲット</div>
<button onclick="removeClass();">実行</button>
.sample {
  color: red;
}

ウェブつくを支えてくれるスポンサー

  • この記事を書いた人
ウェブつく管理人

ウェブつく管理人

WEB制作の仕事をしています。より簡潔に、より分かりやすく解説していきたいと思い、サイトを運営しています。「読むのが苦にならないサイト」を目指しています。よろしくお願いします。

-JavaScript

© 2020 ウェブつく Powered by AFFINGER5