目录
  1. WIKI教程
  2. 学习jQuery
  3. jQuery - CSS

jQuery - CSS

jQuery库支持Cascading Style Sheet（CSS）规范1到3中包含的几乎所有选择器，如万维网联盟网站所述。

只要浏览器启用了JavaScript，使用JQuery库开发人员就可以增强他们的网站，而无需担心浏览器及其版本。

大多数JQuery CSS方法不修改jQuery对象的内容，它们用于在DOM元素上应用CSS属性。

应用CSS属性

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

以下是该方法的语法 - 

<b class="notranslate">selector</b>.css( PropertyName, PropertyValue );

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

例子 (Example)

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

<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属性。 您可以在一次通话中应用任意数量的属性。

以下是该方法的语法 - 

<b class="notranslate">selector</b>.css( {key1:val1, key2:val2....keyN:valN})

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

例子 (Example)

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

<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 )方法可用于分别设置任何元素的宽度和高度。

例子 (Example)

下面是一个简单的例子，它设置第一个分割元素的宽度，其中其余元素的宽度由样式表设置 

<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. 方法和描述
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 - 遍历( Traversing)
jQuery - DOM.下一篇>
↑回到顶部↑
WIKI教程 @2018