ユーザの操作で文字の色や背景等を変更したい場合がある。そういう時は、CSSに変更前・変更後のクラスを定義しておき、JavaScriptで切り替えるとよい。
classNameプロパティを変更する方法
やり方は、要素のオブジェクトを取得し、そのclassnameプロパティを変更する。
HTML+CSSファイル
test001.html
<!DOCTYPE html>
<html lang="ja">
<head>
<title>JavascriptでHTMLのクラスを変更する</title>
<meta charset="UTF-8">
<script src="./test001.js"></script>
<style>
.red { /* 文字を赤色にするクラス */
font-size:200%;
color:red;
font-weight: bold;
}
.blue { /* 文字を青色にするクラス */
font-size:200%;
color:blue;
font-weight: bold;
}
</style>
</head>
<body>
<button onclick="redMessage();">赤</button>
<button onclick="blueMessage();">青</button>
<p id="message" class="red">Hello World</p>
</body>
</html>
JavaScriptファイル
test001.js
function redMessage () {
//オブジェクト取得
var p = document.getElementById("message");
//classを変える(red)
p.className = "red";
}
function blueMessage () {
//オブジェクト取得
var p = document.getElementById("message");
//classを変える(blue)
p.className = "blue";
}
test001.htmlを開くと次のようなページが表示される。
「赤」「青」ボタンをクリックすると文字の色が変更される。
classListを操作する方法
既に設定済みのクラスを生かしたまま、別のクラスを適用したいときは、要素のclassListオブジェクトに対してadd()、remove()メソッドでクラスを追加削除する。
HTML+CSSファイル
test002.html
<!DOCTYPE html>
<html lang="ja">
<head>
<title>JavascriptでHTMLのクラスを変更する2</title>
<meta charset="UTF-8">
<script src="./test002.js"></script>
<style>
.helloworld { /* 文字の大きさと太さを定義 */
font-size:200%;
font-weight: bold;
}
.red { /* 文字を赤色にするクラス */
color:red;
}
.blue { /* 文字を青色にするクラス */
color:blue;
}
</style>
</head>
<body>
<button onclick="redMessage();">赤</button>
<button onclick="blueMessage();">青</button>
<p id="message" class="helloworld">Hello World</p>
</body>
</html>
JavaScriptファイル
test002.js
function redMessage () {
//オブジェクト取得
var p = document.getElementById("message");
//classを変える(red)
p.classList.remove("blue"); //blueが適用されているときは削除
p.classList.add("red"); //redを適用
}
function blueMessage () {
//オブジェクト取得
var p = document.getElementById("message");
//classを変える(blue)
p.classList.remove("red"); //redが適用されているときは削除
p.classList.add("blue"); //blueを適用
}
先ほどの例と違うのは最初は黒い文字で「Hello World」が表示されるところだ。これはhelloworldクラスで文字の大きさと太さだけを定義し、文字色の定義はredとblueクラスに分けたためだ。
「赤」ボタンをクリックすると、p要素からblueクラスが削除、redクラスが追加され、文字色が赤に変わる。
「青」ボタンをクリックすると、p要素からredクラスが削除、blueクラスが追加され、文字色が青に変わる。
helloworldクラスは追加も削除も無いので文字の大きさが変わることはない。
ちなみにremove()メソッドは指定したクラスが無いときは何もせず、add()メソッドも引数のクラスが既に存在する場合は何もしない。