jQuery-CSSセレクターメソッド

jQueryライブラリは、World Wide Web Consortiumのサイトで概説されているように、Cascading Style Sheet（CSS）仕様1〜3に含まれるほぼすべてのセレクターをサポートします。

JQueryライブラリの開発者は、ブラウザでJavaScriptが有効になっている限り、ブラウザとそのバージョンを気にせずにWebサイトを強化できます。

ほとんどのJQuery CSSメソッドはjQueryオブジェクトのコンテンツを変更せず、DOM要素にCSSプロパティを適用するために使用されます。

CSSプロパティを適用

これは、JQueryメソッド* css（PropertyName、PropertyValue）*を使用してCSSプロパティを適用するのが非常に簡単です。

ここにメソッドの構文があります-

selector.css( PropertyName, PropertyValue );

ここで、_PropertyName_をjavascript文字列として渡し、その値に基づいて、_PropertyValue_を文字列または整数にすることができます。

例

以下は、2番目のリスト項目にフォントの色を追加する例です。

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript"
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("li").eq(2).css("color", "red");
         });
      </script>
   </head>

   <body>
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
   </body>
</html>

これにより、次の結果が生成されます–

複数のCSSプロパティを適用する

単一のJQueryメソッド* CSS（\ {key1：val1、key2：val2 ….）*を使用して、複数のCSSプロパティを適用できます。 1回の呼び出しで好きなだけプロパティを適用できます。

ここにメソッドの構文があります-

selector.css( {key1:val1, key2:val2....keyN:valN})

ここで、上記のようにプロパティとしてキーを、値としてvalを渡すことができます。

例

以下は、2番目のリスト項目にフォントの色と背景色を追加する例です。

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript"
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("li").eq(2).css({"color":"red", "background-color":"green"});
         });
      </script>
   </head>

   <body>
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
   </body>
</html>

これにより、次の結果が生成されます–

要素の幅と高さの設定

width（val）および height（val）*メソッドを使用して、要素の幅と高さをそれぞれ設定できます。

例

以下は、最初の分割要素の幅を設定する簡単な例です。残りの要素はスタイルシートで設定された幅を持ちます。

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript"
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div:first").width(100);
            $("div:first").css("background-color", "blue");
         });
      </script>

      <style>
         div {
            width:70px; height:50px; float:left;
            margin:5px; background:red; cursor:pointer;
         }
      </style>
   </head>

   <body>
      <div></div>
      <div>d</div>
      <div>d</div>
      <div>d</div>
      <div>d</div>
   </body>
</html>

これにより、次の結果が生成されます–

JQuery CSSメソッド

次の表は、CSSプロパティを操作するために使用できるすべてのメソッドを示しています-

Sr.No.	Method & Description
1	css( name ) 最初に一致した要素のスタイルプロパティを返します。
2	css( name, value ) 単一のスタイルプロパティを、一致したすべての要素の値に設定します。
3	css( properties ) キー/値オブジェクトをスタイルプロパティとして、一致するすべての要素に設定します。
4	height( val ) 一致したすべての要素のCSS高さを設定します。
5	height( ) 最初に一致した要素の現在の計算されたピクセル、高さを取得します。
6	innerHeight( ) 最初に一致した要素の内側の高さを取得します（境界を除き、パディングを含みます）。
7	innerWidth( ) 最初に一致した要素の内側の幅を取得します（境界を除き、パディングを含みます）。
8	offset( ) ドキュメントを基準として、最初に一致した要素の現在のオフセットをピクセル単位で取得します。
9	offsetParent( ) 最初に一致した要素の配置された親を持つjQueryコレクションを返します。
10	outerHeight( [margin )] 最初に一致した要素の外側の高さ（デフォルトでは境界線とパディングを含む）を取得します。
11	outerWidth( [margin )] 最初に一致した要素の外側の幅（デフォルトでは境界線とパディングを含む）を取得します。
12	position( ) オフセットの親を基準にした要素の左上位置を取得します。
13	scrollLeft( val ) 値が渡されると、一致するすべての要素のスクロール左オフセットがその値に設定されます。
14	scrollLeft( ) 最初に一致した要素のスクロール左オフセットを取得します。
15	scrollTop( val ) 値が渡されると、スクロールトップオフセットは、一致したすべての要素でその値に設定されます。
16	scrollTop( ) 最初に一致した要素のスクロール上部オフセットを取得します。
17	width( val ) 一致したすべての要素のCSS幅を設定します。
18	width( ) 最初に一致した要素の現在の計算されたピクセル、幅を取得します。

Jquery-css

目次

jQuery-CSSセレクターメソッド

CSSプロパティを適用

例

複数のCSSプロパティを適用する

例

要素の幅と高さの設定

例

JQuery CSSメソッド