[jQuery] 要素にclassを追加、削除する（.addClass、.removeClass、.toggleClass）

投稿日：2017年5月21日更新日：2018年4月28日

jQueryで要素にclassを追加や削除をするには、
addClass、removeClass、toggleClassを使用します。

サンプルソース

例）ボタンを押すとdiv要素にクラスを適用、削除する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル</title>
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(function(){
  $('#btn1').click(function(){
    //「class="hoge"」を追加する
    $('#area').addClass('hoge');
  });

  $('#btn2').click(function(){
    //「class="hoge"」を削除する
    $('#area').removeClass('hoge');
  });

  $('#btn3').click(function(){
    //「class="hoge"」が適用されていれば削除し、適用されていなければ追加する
    $('#area').toggleClass('hoge');
  });
});
</script>
<style>
.hoge{
  background-color:#ffffe0;
  border:1px solid #0000ff;
  color:#ff0000;
}
</style>
</head>
<body>
  <div id="area">あいうえお</div>
  <input type="button" id="btn1" value="addClass">
  <input type="button" id="btn2" value="removeClass">
  <input type="button" id="btn3" value="toggleClass">
</body>
</html>

<!DOCTYPE html>

<head>

$(function(){

$('#btn1').click(function(){

//「class="hoge"」を追加する

$('#area').addClass('hoge');

});

$('#btn2').click(function(){

//「class="hoge"」を削除する

$('#area').removeClass('hoge');

});

$('#btn3').click(function(){

//「class="hoge"」が適用されていれば削除し、適用されていなければ追加する

$('#area').toggleClass('hoge');

});

</script>

<style>

.hoge{

background-color:#ffffe0;

border:1px solid #0000ff;

color:#ff0000;

}

</style>

</head>

<body>

<div id="area">あいうえお</div>

</body>

</html>

実行サンプル

ボタンを押すと下の「あいうえお」の部分にclassを適用したり削除したりします。

あいうえお

解説

addClassは、要素にclassを追加します。
removeClassは、要素からclassを削除します。
toggleClassは、要素にclassが適用されていれば追加し、適用されていなければ削除します。

執筆者：とら