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>
むにゅっとした顔がちょっとムカつく、くまの顔をしたケーキ。新宿アルタの地下で見かけて思わず激写！どこから食べようか考えちゃうよね。とりあえず耳からいっておきますかｗ
</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>
むにゅっとした顔がちょっとムカつく、くまの顔をしたケーキ。新宿アルタの地下で見かけて思わず激写！どこから食べようか考えちゃうよね。とりあえず耳からいっておきますかｗ
</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>