jQueryには、CSSクラスを動的に追加または削除するための

addClass()

および

removeClass()

が付属しています。例えば、

  1. $( ‘#para1’). addClass( ‘highlight’); – “ハイライト” CSSクラスを追加する

idが “para1″の要素。

  1. $( ‘#para1’). removeClass( ‘highlight’); – “ハイライト” cssクラスを削除する

idが “para1″の要素から取得します。


<html>
<head>
<style type="text/css">
  .highlight {
    background:green;
  }
 </style>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
</head>
<body>
  <h1>jQuery add/remove css class example</h1>

  <p id="para1">This is paragraph 1</p>
  <p>This is paragraph 2</p>
  <p>This is paragraph 3</p>
  <p>This is paragraph 4</p>

  <button id="addClass">Add highlight</button>
  <button id="removeClass">Remove highlight</button>

<script type="text/javascript">

    $("#addClass").click(function () {

      $('#para1').addClass('highlight');

    });

    $("#removeClass").click(function () {

      $('#para1').removeClass('highlight');

    });

</script>
</body>
</html>