今回はクラスについて4パターンの動作をデモしていきたいと思います。
Menu
addClass
addClassは指定したクラスを追加してくれます。
サンプルコード
セレクターで対象となるクラスを指定後、addClassメソッドの引数に追加したいクラス名を記述することでクラスが追加できます。
1 2 3 4 | $('button').click(function(){ // ボタンをクリックでsampleクラスにaddクラスが追加 $('.sample').addClass('add'); }); |
CSS
記述例.samle.addまたは.add
1 2 3 4 5 6 7 8 9 | @charset "utf-8"; .sample{ height: 100px; width: 100px; background-color: red; } .sample.add{ background-color: blue; } |
動作確認
ボタンをクリックしてsampleクラスにaddクラスが追加されることでcssの.sample.addが有効になり背景色が青色に変わるのが分かるかと思います＼(^^)／
toggleClass
toggleClassは指定したクラスが存在したら削除して、指定したクラスが無かったら追加します。
サンプルコード
セレクターで対象となるクラスを指定後、toggleClassメソッドの引数に追加削除したいクラス名を記述することで指定したクラスが追加削除されます。
1 2 3 | $('button').click(function() { $('.sample').toggleClass('add'); }); |
CSS
記述例.samle.addまたは.add
1 2 3 4 5 6 7 8 9 10 11 12 | @charset "utf-8"; .sample{ display: none; } .sample.add{ height: 100px; width: 100px; background-color: blue; display: block; color: white; font-size: 0.7em; } |
動作確認
ボタンをクリックしてaddクラスがなかったら追加でcssの.sample.addが有効になり、addクラスが存在したらaddクラスを削除してcssの.sampleが有効になります。
removeClass
removeClassは指定したクラスを削除します。
サンプルコード
セレクターで対象となるクラスを指定後、removeClassの引数に削除するクラスを指定します。
引数を指定しない場合はセレクターで指定したクラスの属性値を全て削除します。
1 2 3 4 | $('button').click(function() { $('.sample').removeClass('add'); $('.sample > p').text('addを削除しました'); }); |
CSS
記述例.samle.addまたは.add
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | @charset "utf-8"; .sample{ height: 100px; width: 100px; background-color: red; color: white; font-size: 0.7em; } .sample.add{ height: 100px; width: 100px; background-color: blue; color: white; font-size: 0.7em; } |
動作確認
ブラウザをリロードするとcssの.sample.addが有効になり、removeClassボタンでaddクラスが削除されてcssの.sampleが有効になり下記のような動きになります。
hasClass
hasClassは指定したクラスが存在したらtrue、なければfalseを返します。
サンプルコード
セレクターでdiv要素を指定後、hasClassの引数にクラスの属性値を記述し、div.sampleクラスの存在の有無を調べてコンソールに結果を表示させます。
1 2 3 4 5 | $('button').click(function() { $('div').hasClass('sample'); $('.sample > p').text('存在します'); console.log($('div').hasClass('sample')); }); |
CSS
1 2 3 4 5 6 7 8 9 | @charset "utf-8"; .sample{ height: 100px; width: 100px; background-color: blue; color: white; font-size: 0.7em; } |
動作確認
.sampleクラスが存在したのでtrueが返り、コンソールでtrueが表示されるのが確認できます。
まとめ
今回はクラスのいろいろについて解説しました。
画面スクロール時の切り替えやアコーディオンなどcssを切り替えるために使用される機会が多く、非常に便利な機能なので是非この機会にマスターしてサイトやブログを動的な動きさせてみてはいかがでしょうか！
以上です(★‿★)
