スタイル操作：CSS｜jQuery APIリファレンス｜Ajax｜PHP & JavaScript Room
Search

jQuery APIリファレンススタイル操作：CSS


  1. css(name)〔最初にマッチした要素の指定したプロパティの値を取得 〕
  2. css(properties)〔マッチした要素すべてに複数のプロパティを設定 〕
  3. css(name, value)〔マッチした要素すべてに指定したプロパティとその値を設定 〕

css(name)
最初にマッチした要素の指定したプロパティの値を取得

2009/2/27

css(name)　戻り値：文字列

最初にマッチした要素のstyle属性のプロパティの値を返します。

  • 第1引数nameには、アクセスするプロパティ名を指定します。

設置イメージ設置イメージ
css(name)の使用例サンプルを見る
<!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>CSS：css()の使用例 | 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(){
                /* クリックした要素の背景色を取得 */
                $(".boxes li").click(function(){
                    var color=$(this).css("background-color");
                    $("#res").html("この要素の背景色は<span style='color:"+color+"'>"+color+"</span>です。");
                });
            });
        </script>
        <!-- CSS -->
        <style type="text/css">
            .boxes ul { margin:0 0 1em 0; padding:0; height:100px; overflow:hidden; }
            .boxes li { margin:0 10px 0 0; padding:0; list-style:none; width:100px; height:100px; line-height:100px; float:left; color:#fff; text-align:center;  }
            
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>CSS：css()の使用例 | jQuery</h1>
            <p>▼要素をクリックすると、クリックした要素の背景色を取得して表示します。</p>
<!-- CODE -->
            <div class="boxes cf">
                <ul>
                    <li style="background-color:blue;">青</li>
                    <li style="background-color:rgb(15,99,30);">緑</li>
                    <li style="background-color:#123456;">ネイビー</li>
                    <li style="background-color:#f11;">赤</li>
                </ul>
            </div>
            <p id="res"></p>
<!-- / CODE -->
        </div>
    </body>
</html>

css(properties)
マッチした要素すべてに複数のプロパティを設定

2009/2/27

css(properties)　戻り値：jQuery

マッチした要素すべてにキーと値のオブジェクをプロパティとして設定します。 これは、マッチした要素に複数のスタイルプロパティを設定するのに有用です。

  • 第1引数propertiesには、プロパティとして設定するキーと値のペアを指定します。

設置イメージ設置イメージ
css(properties)の使用例サンプルを見る
<!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>スタイル操作：CSS：css(properties)の使用例 | 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(){
                /* クリックした要素の背景色を取得 */
                $("#navi li").mouseover(function () {
                    $(this).css({
                        "background":"orange",
                        "color":"#fff"
                    });
                });
                $("#navi li").mouseout(function () {
                    $(this).css({
                        "background-color":"#ccc",
                        "color":"#333"
                    });
                });
            });
        </script>
        <!-- CSS -->
        <style type="text/css">
            #navi ul { margin:0; padding:0; border-bottom:1px solid #666; overflow:hidden; }
            #navi li { margin:0 10px 0 0; padding:0; list-style:none; width:8em; height:3em; line-height:3em; float:left; color:#333; background-color:#ccc; text-align:center;  }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>スタイル操作：CSS：css(properties)の使用例 | jQuery</h1>
            <p>▼メニューにマウスオーバー時、マウスアウト時で、異なるスタイルを適用します。</p>
<!-- CODE -->
            <div id="navi" class="cf">
                <ul>
                    <li>メニューA</li>
                    <li>メニューB</li>
                    <li>メニューC</li>
                    <li>メニューD</li>
                    <li>メニューE</li>
                </ul>
            </div>
            <p id="res"></p>
<!-- / CODE -->
        </div>
    </body>
</html>

css(name, value)
マッチした要素すべてに指定したプロパティとその値を設定

2009/2/27

css(name, value)　戻り値：jQuery

マッチした要素すべての値に、指定したプロパティを設定します。

  • 第1引数nameには、設定するプロパティ名を指定します。

  • 第2引数valueには、nameに指定したプロパティの値を指定します。
    プロパティの値に数値を指定すると、自動的にピクセル値に変換されます。

設置イメージ設置イメージ
css(name, value)の使用例サンプルを見る
<!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>CSS：css(name, value)の使用例 | 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(){
                /* クリックした要素の背景色を取得 */
                $("#navi li").mouseover(function () {
                    $(this).css("background-color","orange");
                });
                $("#navi li").mouseout(function () {
                    $(this).css("background-color","#666");
                });
            });
        </script>
        <!-- CSS -->
        <style type="text/css">
            #navi ul { margin:0; padding:0; border-bottom:1px solid #666; overflow:hidden; }
            #navi li { margin:0 10px 0 0; padding:0; list-style:none; width:8em; height:3em; line-height:3em; float:left; color:#fff; background-color:#666; text-align:center;  }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>CSS：css(name, value)の使用例 | jQuery</h1>
            <p>▼メニューにマウスオーバー時、マウスアウト時で、異なるスタイルを適用します。</p>
<!-- CODE -->
            <div id="navi" class="cf">
                <ul>
                    <li>メニューA</li>
                    <li>メニューB</li>
                    <li>メニューC</li>
                    <li>メニューD</li>
                    <li>メニューE</li>
                </ul>
            </div>
            <p id="res"></p>
<!-- / CODE -->
        </div>
    </body>
</html>

td要素の値が1000以上の場合にハイライト表示

参照：Useful and Handy jQuery Tips and Tricks@11

設置イメージ設置イメージ
css(name, value)の使用例サンプルを見る
<!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>CSS：css(name, value)の使用例 | 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">
            //extend the jQuery functionality
            $.extend($.expr[':'], {
                    //name of your special selector
                    moreThanAThousand:function (a){
                    //Matching element
                    return parseInt($(a).html()) > 1000;
                }
            });  
            $(function(){
                $('td:moreThanAThousand').css('background-color', 'yellow');
            });
        </script>
        <!-- CSS -->
        <style type="text/css">
            table { border:1px solid #ccc; border-spacing:0; border-collapse:collapse; }
            td { border:1px solid #ccc; background-color:#fff; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>CSS：css(name, value)の使用例 | jQuery</h1>
            <p>参照：<a href='http://www.queness.com/post/126/useful-and-handy-jquery-tips-and-tricks'>Useful and Handy jQuery Tips and Tricks@11</a></p>
            <p>▼td要素の値が1000以上の場合にハイライト表示</p>
<!-- CODE -->
<table>
    <tr><td>1400</td><td>700</td><td>400</td><td>2500</td><td>600</td><td>100</td></tr>
    <tr><td>100</td><td>1100</td><td>900</td><td>2600</td><td>1100</td><td>1200</td></tr>
</table>
<!-- / CODE -->
        </div>
    </body>
</html>

関連コンテンツ

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

投票する 投票結果を見る

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

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

©2026 PHP & JavaScript Room All Rights Reserved.

pagetop