classList.replace()でクラス名を置換する【JavaScript】

2019年7月6日

この記事では、classList.replace()を使ってクラス名を置換してみます。

この記事の目次

classList.replace()

classList.replace('置き換える古いクラス名', '置き換えたい新しいクラス名')という形式で使います。

<div id="target" class="banana">クラス名の置換</div>

上記のHTMLのクラス名「banana」をclassList.replaceで「apple」に置き換えるには下記のJavaScriptコードになります。

var target = document.getElementById('target');
target.classList.replace('banana', 'apple');

上記のJavaScriptを反映した後のHTMLコードは下記になります。

<div id="target" class="apple">クラス名の置換</div>

「置換実行」ボタンをクリックするとイベントが発火し、クラス名が置換され、背景色が変更されます。

<div id="target" class="banana white">クラス名の置換</div>
<button onclick="replaceClass();">置換実行</button>

function replaceClass() {
	var target = document.getElementById('target');
	target.classList.replace('banana', 'apple');
}

id targetをクリックするとbananaクラスがappleクラスに置換されます。

.banana {
  background-color: yellow;
}
.apple {
  background-color: red;
}
.white {
  color: white;
}

bananaクラスがappleクラスに置換されても、whiteクラスはそのままです。

ウェブつく管理人

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