jQuery - class の追加・削除

公開日：2018-12-10 更新日：2019-05-14
[jQuery]

1. 概要

指定した要素の class の追加と削除を行います。

属性の設定
$(セレクタ).addClass(クラス名, 値);

属性の削除
$(セレクタ).removeClass(クラス名);

2. サンプル

<div>タグの CSS を動的に設定します。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head>
<body>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <style>
    .error { color: red; }
    .info  { color: skyblue; }
    .waku  { border: 1px solid red; }
  </style>

  <!-- 画面 -->
  <div id="fruits">
    <div id="apple">apple</div>
    <div id="orange">orange</div>
    <div id="banana" class="error">banana</div>
  </div>
  
  <!-- Script -->
  <script>
    $(function(){
      //追加
      $("#apple").addClass("info");
      $("#apple").addClass("waku");

      //削除
      $("#banana").removeClass("error");

      //取得
      console.log( $("#apple").attr("class") );
    });
  </script>

</body></html>



info waku

実行結果：画面



Tag

New Article