JavaScriptでHTMLを装飾していく方法を紹介します。
装飾する方法としては、
- あらかじめ設定したクラスを付与する
- スタイル属性を書き換える
の2通りの方法があります。
まずは体験してみよう
①クラス追加：ターゲットの見出しにクラスを付与する
②クラス削除：ターゲットの見出しのクラスを削除する
③クラス反復：ターゲットの見出しにクラスが付与されたり削除されたりを繰り返す
④スタイル追加：ターゲットの見出しにスタイル属性が付与される
⑤スタイル削除：ターゲットの見出しのスタイル属性を削除する
④を押すと、①②③が機能しなくなる！
「④スタイルの追加」ボタンを押すと、①②③のクラス関連のボタンが機能しなくなります。
これは一体なぜでしょうか？
実はJavaScriptは正常に作動していて、クラスもちゃんと付与されたり削除されたりしています。
これはクラスで付与された赤色より、タグのスタイル属性に直接付与された青色の方が優先度が高いためです。
JavaScriptの問題ではなく、CSSの仕様というわけですね。
どちらを使うかは好みなのですが、以下の理由からクラスで操作した方が使いやすいです。
- クラスの付与なので、一度でまとめてスタイルの操作ができる。
- クラスのみ、簡単に付与したり削除したり反復させることができる。
クラスの操作
クラスの操作はclassListを使って操作することができます。
classListの後ろにさらにaddかremoveかtoggleかを記述することで、指定したクラスをどうするか指示することができます。
クラスの付与
要素.classList.add('クラス名');クラス名の前に.（ドット）は不要です。
クラスの削除
要素.classList.remove('クラス名');クラスの追加と削除の反復
上の2つはシンプルに追加するか削除するかでしたが、こちらは指定のクラスがなければ付与し、付与されていれば削除するという動きをします。
要素.classList.toggle('クラス名');スタイルの操作
スタイルの操作は、styleを使って操作することができます。
スタイルの付与
要素.style.プロパティ名 = '値';さてここでややこしいのですが、ハイフンを用いるプロパティは、ハイフンを消してキャメルケースに変更しなければいけません。
いくつか例を紹介します
- font-size -> fontSize
- background-color -> backgroundColor
スタイルの削除
要素.style.removeProperty('プロパティ名');残念ながら、ここでのプロパティ名は、キャメルケースを使わずに、通常の表記を使うというまぎらわしい仕様になっています。
サンプルコード
一番最初に体験した5つのボタンのコードです。
検証ツールで、ボタンを押す瞬間にクラスやスタイル属性が変更されるのを確認することができます。
<h2 class="target">まずは体験してみよう</h2>
<button class="addC">①クラス追加</button>
<button class="removeC">②クラス削除</button>
<button class="toggleC">③クラス反復</button>
<button class="addS">④スタイル追加</button>
<button class="removeS">⑤スタイル削除</button>
<style>
.addClass{color: red;}
</style>
<script>
// 要素の取得
const target = document.querySelector('.target');
// ボタンクリックでクラス付与
document.querySelector('.addC').addEventListener('click', function(){
target.classList.add('addClass');
});
// ボタンクリックでクラス削除
document.querySelector('.removeC').addEventListener('click', function(){
target.classList.remove('addClass');
});
// ボタンクリックでクラスを付与したり削除したり
document.querySelector('.toggleC').addEventListener('click', function(){
target.classList.toggle('addClass');
});
// ボタンクリックでスタイル属性にプロパティ付与
document.querySelector('.addS').addEventListener('click', function(){
target.style.color = 'blue';
});
// ボタンクリックでスタイル属性のプロパティ削除
document.querySelector('.removeS').addEventListener('click', function(){
target.style.removeProperty('color');
});
</script>
