JQuery CSS操作

大多数jQuery CSS方法都不会修改jQuery对象的内容，而是用于将CSS属性应用于DOM元素。

应用CSS属性

使用JQuery方法应用任何CSS属性非常简单CSS(PropertyName，PropertyValue)。

 selector.css( PropertyName, PropertyValue );

这里可以将PropertyName作为javascript字符串传递，根据它的值，PropertyValue可以是字符串或整数。

下面是将字体颜色添加到第二个列表项的示例。

<html>
   <head>
      <title>The jQuery 示例</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>

这将产生以下输出:

list item 1
list item 2
list item 3
list item 4
list item 5
list item 6

应用多个CSS属性

您可以使用单个JQuery方法应用多个CSS属性CSS({key1:val1，key2:val2.)。您可以在单个调用中应用任意多个属性。

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

在这里，您可以传递key作为属性，val作为其值，如上所述。

下面是将字体颜色以及背景颜色添加到第二个列表项的示例。

<html>
   <head>
      <title>The jQuery 示例</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>

这将产生以下输出:

list item 1
list item 2
list item 3
list item 4
list item 5
list item 6

设置元素 Width & Height

width(Val)和height(Val)方法可分别用于设置任何元素的宽度和高度。

下面是一个简单的示例，它设置了第一个除法元素的宽度，其余元素的宽度由样式表设置

 <html>
    <head>
       <title>The jQuery 示例</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属性-的所有方法

No.	Method	描述
1	css( name )	返回第一个匹配元素的Style属性。
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操作

应用CSS属性

应用多个CSS属性

设置元素 Width & Height

jQuery CSS方法

加入QQ群