首页 > 编程笔记 > JavaScript笔记 > jQuery DOM操作

jQuery css()方法的用法

样式操作，指的是使用 jQuery 来操作一个元素的 CSS 属性。

在 jQuery 中，对于样式操作共有以下 3 种：
在 jQuery 中，CSS 属性的操作有两种情况：一种是“获取属性”，另一种是“设置属性”。

jQuery css()方法获取属性值

在 jQuery 中，我们可以使用 css() 方法来获取某一个元素的 CSS 属性的取值。

语法：

$().css("属性名")


举例： 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title></title>
  6.     <style>
  7.         p{font-weight:bold;}
  8.     </style>
  9.     <script src="js/jquery-1.12.4.min.js"></script>
  10.     <script>
  11.         $(function () {
  12.             $("#btn").click(function(){
  13.                 var result = $("p").css("font-weight");
  14.                 alert("font-weight取值为：" + result);
  15.             });
  16.         })
  17.     </script>
  18. </head>
  19. <body>
  20.     <p>新宝库</p>
  21.     <input id="btn" type="button" value="获取" />
  22. </body>
  23. </html>
预览效果如图 1 所示。
默认效果
图 1：默认效果

$("p").css("font-weight")表示获取 p 元素的 font-weight 属性值。我们点击【获取】按钮后，浏览器会弹出对话框，如图 2 所示。
对话框
图 2：对话框

jQuery css()方法设置属性

在 jQuery 中，设置某一个元素的 CSS 属性的值，我们用的也是 css() 方法。不过对于 css() 方法，我们需要分两种情况来考虑：一种是“设置一个属性”，另一种是“设置多个属性”。

语法：

//设置一个属性
$().css("属性", "取值")

//设置多个属性
$().css({"属性1":"取值1", "属性2":"取值2", ..., "属性n":"取值n"})

当我们想要设置多个 CSS 属性时，使用的是对象的形式。其中属性与取值采用的是“键值对”方式，每个“键值对”之间用英文逗号隔开。

举例：设置一个属性 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title></title>
  6.     <script src="js/jquery-1.12.4.min.js"></script>
  7.     <script>
  8.         $(function (){
  9.             $("#btn").click(function(){
  10.                 $("li:nth-child(odd)").css("color","red");
  11.             });
  12.         })
  13.     </script>
  14. </head>
  15. <body>
  16.     <ul>
  17.         <li>HTML</li>
  18.         <li>CSS</li>
  19.         <li>JavaScript</li>
  20.         <li>jQuery</li>
  21.         <li>Vue.js</li>
  22.     </ul>
  23.     <input id="btn" type="button" value="设置" />
  24. </body>
  25. </html>
默认情况下，预览效果如图 3 所示。
默认效果
图 3：默认效果

我们点击【设置】按钮后，预览效果如图 4 所示。
点击按钮后效果
图 4：点击按钮后效果

$("li:nth-child(odd)").css("color","red")这句代码使用了“子元素”伪类选择器，表示选取 ul 元素下所有序号为“奇数”（序号从 1 开始）li 元素，然后设置 color 属性值为 red。

实际上，下面两句代码是等价的。 
  1. $().css("color","red")
  2. $().css({"color": "red"})

举例：设置多个 CSS 属性 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title></title>
  6.     <script src="js/jquery-1.12.4.min.js"></script>
  7.     <script>
  8.         $(function (){
  9.             $("#btn").click(function(){
  10.                 $("li:nth-child(odd)").css({"color":"red", "background-color":"silver", "font-weight":"bold"});
  11.             });
  12.         })
  13.     </script>
  14. </head>
  15. <body>
  16.     <ul>
  17.         <li>HTML</li>
  18.         <li>CSS</li>
  19.         <li>JavaScript</li>
  20.         <li>jQuery</li>
  21.         <li>Vue.js</li>
  22.     </ul>
  23.     <input id="btn" type="button" value="设置" />
  24. </body>
  25. </html>
默认情况下，预览效果如图 5 所示。
默认效果
图 5：默认效果
我们点击【设置】按钮后，预览效果如图 6 所示。
点击按钮后效果
图 6：点击按钮后效果
分析： 
  1. $()css({"color":"red", "background-color":"silver", "font-weight":"bold"});

上面这句代码其实可以等价于： 
  1. $().css("color", "red);
  2. $().css("background-color", "silver");
  3. $().css("font-weight", "bold");

所有教程

优秀文章