Search

jQuery APIリファレンスDOM要素の属性：クラス

  1. addClass(class)〔要素に指定したクラスを追加〕
  2. hasClass(class)〔要素が指定したクラスを持っているか判定〕
  3. removeClass([class])〔要素からクラスを削除〕
  4. toggleClass(class)〔要素のクラスを切替〕
  5. 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>

連続リスト

参照：jQuery Sequential List

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>

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか？

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手（1行メッセージも送れます♪）

TOP / ご利用上の注意点 / リンクについて / RSS

©2026 PHP & JavaScript Room All Rights Reserved.

pagetop