jQuery APIリファレンスDOM要素の属性:クラス
- addClass(class)〔要素に指定したクラスを追加〕
- hasClass(class)〔要素が指定したクラスを持っているか判定〕
- removeClass([class])〔要素からクラスを削除〕
- toggleClass(class)〔要素のクラスを切替〕
- toggleClass(class, switch)〔要素のクラスを切替〕
addClass(class)
要素に指定したクラスを追加
2009/2/27
addClass(class) 戻り値:jQuery
マッチした各要素にして指定したクラスを追加します。
第1引数classには、要素に追加するクラスを指定します。
複数のクラスを指定する場合は、スペース区切りで指定してください。

addClass(class)の使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>DOM要素の属性(Attirbutes):クラス(Class):addClass(class)の使用例 | jQuery</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("#btn_addclass").click(function(){ /* boxクラス追加 */ $("#sample").addClass("box"); }); $("#btn_removeclass").click(function(){ /* boxクラス削除 */ $("#sample").removeClass("box"); }); }); </script> <style type="text/css"> .box { background:#000; color:#fff; width:350px; padding:10px; clear:both; } .box a { width:75px; height:75px; float:left; margin-right:10px } </style> </head> <body> <div id="wrap"> <h1>DOM要素の属性(Attirbutes):クラス(Class):addClass(class)の使用例 | jQuery</h1> <!-- CODE --> <p> <button id="btn_addclass">boxクラス追加</button> <button id="btn_removeclass">boxクラス削除</button> </p> <div id="sample" class="cf"> <a href="http://www.flickr.com/photos/22559849@N06/2974008614/"><img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_s.jpg" width="75" height="75" alt="くまさんケーキ" /></a> むにゅっとした顔がちょっとムカつく、くまの顔をしたケーキ。新宿アルタの地下で見かけて思わず激写!どこから食べようか考えちゃうよね。とりあえず耳からいっておきますかw </div> <!-- CODE / --> </div> </body> </html>
連続リスト

addClass(class)の使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>DOM要素の属性(Attirbutes):クラス(Class):addClass(class)の使用例 | jQuery</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ /* 例1 */ $("#steps li").each(function(i){ ++i; $(this).addClass("step"+i); }); /* 例2 */ $("#commentlist li").each(function (i) { ++i; $(this).prepend('<span class="commentnumber"> #'+i+'</span>'); }); }); </script> <style type="text/css"> /* 例1 */ #steps { margin:2em 0; padding:0; list-style:none; } #steps li { margin:0; padding:5px 0 10px 80px; list-style:none; } #steps h3 { font-size:1.2em; margin:0; padding:0; } #steps li { background:transparent; background-position:0 0; background-repeat:no-repeat; min-height:33px; height:auto!important; height:33px; } #steps .step1 { background-image:url("/content/img/ajax/step1.png"); } #steps .step2 { background-image:url("/content/img/ajax/step2.png"); } #steps .step3 { background-image:url("/content/img/ajax/step3.png"); } /* 例2 */ #commentlist { margin:2em 0; padding:0 0 0 2em; } #commentlist li { list-style-type:decimal; position: relative; border-bottom:1px solid #ccc; color:darkorange; font-weight:bold; font-size:1.2em; } #commentlist h3 { margin:10px 0 5px 0; padding:0; } #commentlist li p { color:#333; margin:0 0 10px 0; padding:0; font-weight:normal; font-size:.8em; } #commentlist .commentnumber { position: absolute; top:0; right:0; } </style> </head> <body> <div id="wrap"> <h1>DOM要素の属性(Attirbutes):クラス(Class):addClass(class)の使用例 | jQuery</h1> <h2>参照:<a href='http://www.webdesignerwall.com/tutorials/jquery-sequential-list/'>jQuery Sequential List</a></h2> <p>▼li要素に順次クラスを追加します。</p> <!-- CODE --> <ol id="steps"> <li> <h3>Apacheサイトにアクセス</h3> <p>Apache公式サイトから、最新バージョンの「Windows用MSIパッケージ」をダウンロードします。</p> </li> <li> <h3>Apacheのバージョンを選択</h3> <p>Apacheの最新バージョンは「Apache 2.2.4」(2007/01現在)です。 「Download」をクリックすると、ダウンロード案内ページが表示されます。</p> </li> <li> <h3>選択したバージョンのパッケージをダウンロード</h3> <p>ダウンロード案内ページで、Win32 Binary (MSI Installer)の隣にある「apache_バージョン番号-win32-x86-no_ssl.msi」をクリックすると、ダウンロードが開始します。 ダウンロードが完了すると、デスクトップに「パッケージアイコンパッケージアイコン」が表示されます。</p> </li> </ol> <ol id="commentlist"> <li> <h3>Apacheサイトにアクセス</h3> <p>Apache公式サイトから、最新バージョンの「Windows用MSIパッケージ」をダウンロードします。</p> </li> <li> <h3>Apacheのバージョンを選択</h3> <p>Apacheの最新バージョンは「Apache 2.2.4」(2007/01現在)です。 「Download」をクリックすると、ダウンロード案内ページが表示されます。</p> </li> <li> <h3>選択したバージョンのパッケージをダウンロード</h3> <p>ダウンロード案内ページで、Win32 Binary (MSI Installer)の隣にある「apache_バージョン番号-win32-x86-no_ssl.msi」をクリックすると、ダウンロードが開始します。 ダウンロードが完了すると、デスクトップに「パッケージアイコンパッケージアイコン」が表示されます。</p> </li> </ol> <!-- CODE / --> </div> </body> </html>
hasClass(class)
要素が指定したクラスを持っているか判定
2009/2/27
hasClass(class) 戻り値:真偽値
マッチした各要素の中に少なくとも1つ指定したクラスが含まれているかどうかを判定します。
含まれている場合にTRUEを返します。
第1引数classには、チェックするCSSのクラス名を指定します。

hasClass(class)の使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>DOM要素の属性(Attirbutes):クラス(Class):hasClass(class)の使用例 | jQuery</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("#res1").append($("#sample p:first").hasClass("selected").toString()); $("#res2").append($("#sample p:last").hasClass("selected").toString()); $("#res3").append($("#sample p").hasClass("selected").toString()); }); </script> <style type="text/css"> p { margin: 8px; font-size:16px; } .selected { color:red; } .highlight { background:yellow; } </style> </head> <body> <div id="wrap"> <h1>DOM要素の属性(Attirbutes):クラス(Class):hasClass(class)の使用例 | jQuery</h1> <!-- CODE --> <div id="sample"> <p>こんにちは</p> <p class="selected">さようなら</p> <div id="res1">1番目の段落にselectedクラスが指定されているか:</div> <div id="res2">1番目の段落にselectedクラスが指定されているか:</div> <div id="res3">1番目の段落にselectedクラスが指定されているか:</div> </div> <!-- CODE / --> </div> </body> </html>
removeClass([class])
要素からクラスを削除
2009/2/27
removeClass([class]) 戻り値:jQuery
マッチした各要素から指定したクラスを削除します。 引数を省略した場合は、すべてのクラスが削除されます。
第1引数classには、要素から削除するCSSのクラスを指定します。
複数のクラスを指定する場合は、スペース区切りで指定してください。

removeClass([class])の使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>DOM要素の属性(Attirbutes):クラス(Class):removeClass([class])の使用例 | jQuery</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("#btn_addclass").click(function(){ /* boxクラス追加 */ $("#sample").addClass("box"); }); $("#btn_removeclass").click(function(){ /* boxクラス削除 */ $("#sample").removeClass("box"); }); }); </script> <style type="text/css"> .box { background:#000; color:#fff; width:350px; padding:10px; clear:both; } .box a { width:75px; height:75px; float:left; margin-right:10px } </style> </head> <body> <div id="wrap"> <h1>DOM要素の属性(Attirbutes):クラス(Class):removeClass([class])の使用例 | jQuery</h1> <!-- CODE --> <p> <button id="btn_addclass">boxクラス追加</button> <button id="btn_removeclass">boxクラス削除</button> </p> <div id="sample" class="cf"> <a href="http://www.flickr.com/photos/22559849@N06/2974008614/"><img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_s.jpg" width="75" height="75" alt="くまさんケーキ" /></a> むにゅっとした顔がちょっとムカつく、くまの顔をしたケーキ。新宿アルタの地下で見かけて思わず激写!どこから食べようか考えちゃうよね。とりあえず耳からいっておきますかw </div> <!-- CODE / --> </div> </body> </html>
toggleClass(class)
要素のクラスを切替
2009/2/27
toggleClass(class) 戻り値:jQuery
要素に指定したクラスが存在しないならクラス追加し、要素に指定したクラスが存在するならそのクラスを削除します。
第1引数classには、要素上で切り替えるCSSのクラスを指定します。

toggleClass(class)の使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>DOM要素の属性(Attirbutes):クラス(Class):toggleClass(class)の使用例 | jQuery</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("p").click(function(){ $(this).toggleClass("rollover"); }); }); </script> <style type="text/css"> .rollover { background:yellow; } </style> </head> <body> <div id="wrap"> <h1>DOM要素の属性(Attirbutes):クラス(Class):toggleClass(class)の使用例 | jQuery</h1> <!-- CODE --> <p>クリックすると</p> <p>段落の背景色のスタイルが</p> <p>切り替わります。</p> <!-- CODE / --> </div> </body> </html>
toggleClass(class, switch)
要素のクラスを切替
2009/2/27
toggleClass(class, switch) 戻り値:jQuery
switchがTRUEなら要素に指定したクラスを追加し、switchがFALSEなら指定したクラスを削除します。
第1引数classには、要素上で切り替えるCSSのクラスを指定します。
第2引数classには、classに指定したクラスを切り替える真偽値を指定します。

toggleClass(class, switch)の使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>DOM要素の属性(Attirbutes):クラス(Class):toggleClass(class, switch)の使用例 | jQuery</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var count=0; $("#sample p").click(function(){ count++; $(this).toggleClass("highlight", count%3==0); }); }); </script> <style type="text/css"> .highlight { background:yellow; } </style> </head> <body> <div id="wrap"> <h1>DOM要素の属性(Attirbutes):クラス(Class):toggleClass(class, switch)の使用例 | jQuery</h1> <p>▼3回クリックすると「highlight」クラスを切り替えます。</p> <!-- CODE --> <div id="sample"> <p>3回クリックすると</p> <p>段落の背景色のスタイルが</p> <p>切り替わります。</p> </div> <!-- CODE / --> </div> </body> </html>