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( ) 获取第一个匹配元素的当前计算的像素宽度。
取消
感谢您的支持,我会继续努力的!
扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

Powered by bytekits.com,汇天下文字,成非凡梦想!!!