jQueryでCSSクラスを動的に追加/削除する方法
jQueryには、CSSクラスを動的に追加または削除するための
addClass()
および
removeClass()
が付属しています。例えば、
-
$( ‘#para1’). addClass( ‘highlight’); – “ハイライト” CSSクラスを追加する
idが “para1″の要素。
-
$( ‘#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>