公開日： 2018/11/05
最終更新日：2018/11/05

【jQuery】Class属性の追加、削除、切り替えのサンプル

jQuery
jQueryでは直接インラインでスタイルを指定することができるが、これを多用してしまうとどこでスタイルを設定しているのか、スタイルを確認するためにJavaScriptのコードを読まないといけないといった問題が起きる。
そのため、スタイルはCSSで設定し、Class属性を着脱、切り替えることでスタイルを適用する方が良い。
以下は、スタイルを切り替える際のサンプル。

■デモ

アイテム１

■HTML

<style type="text/css">
    .sample {
        background-color : yellow;
        border : solid 2px Lime;
        color : red;
    }
</style>
<ul id="list1">
    <li id="item1">アイテム１</li>
</ul>
<br>
<input type="button" id="button-add" value="classを追加"/><br>
<input type="button" id="button-reset" value="classを削除"/><br>
<input type="button" id="button-toggle" value="classのON/OFFを切り替え"/><br>

.sample {

background-color : yellow;

border : solid 2px Lime;

color : red;

}

</style>

</ul>

<br>

■JavaScript

jQuery(function($) {

  //classを追加
  $('#button-add').click(function(e) {
    $('ul li').addClass('sample');
  });

  //classを削除
  $('#button-reset').click(function(e) {
    $('#list1 li').removeClass('sample');
  });
  
  //classのon/offを切り替え
  $('#button-toggle').click(function(e) {
    $('#list1 li').toggleClass('sample');
  });
})