首页 > 编程笔记 > JavaScript笔记 > jQuery DOM操作
jQuery css()方法的用法
样式操作,指的是使用 jQuery 来操作一个元素的 CSS 属性。
在 jQuery 中,对于样式操作共有以下 3 种:
在 jQuery 中,CSS 属性的操作有两种情况:一种是“获取属性”,另一种是“设置属性”。
语法:
举例:
图 1:默认效果
图 2:对话框
语法:
举例:设置一个属性
图 3:默认效果
我们点击【设置】按钮后,预览效果如图 4 所示。
图 4:点击按钮后效果
实际上,下面两句代码是等价的。
举例:设置多个 CSS 属性
图 5:默认效果
我们点击【设置】按钮后,预览效果如图 6 所示。
图 6:点击按钮后效果
分析:
上面这句代码其实可以等价于:
在 jQuery 中,对于样式操作共有以下 3 种:
- CSS 属性操作;
- CSS 类名操作;
- 个别样式操作。
在 jQuery 中,CSS 属性的操作有两种情况:一种是“获取属性”,另一种是“设置属性”。
jQuery css()方法获取属性值
在 jQuery 中,我们可以使用 css() 方法来获取某一个元素的 CSS 属性的取值。语法:
$().css("属性名")
举例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> p{font-weight:bold;} </style> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function () { $("#btn").click(function(){ var result = $("p").css("font-weight"); alert("font-weight取值为:" + result); }); }) </script> </head> <body> <p>新宝库</p> <input id="btn" type="button" value="获取" /> </body> </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"})
举例:设置一个属性
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function (){ $("#btn").click(function(){ $("li:nth-child(odd)").css("color","red"); }); }) </script> </head> <body> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>jQuery</li> <li>Vue.js</li> </ul> <input id="btn" type="button" value="设置" /> </body> </html>默认情况下,预览效果如图 3 所示。
图 3:默认效果
我们点击【设置】按钮后,预览效果如图 4 所示。
图 4:点击按钮后效果
$("li:nth-child(odd)").css("color","red")
这句代码使用了“子元素”伪类选择器,表示选取 ul 元素下所有序号为“奇数”(序号从 1 开始)li 元素,然后设置 color 属性值为 red。实际上,下面两句代码是等价的。
$().css("color","red") $().css({"color": "red"})
举例:设置多个 CSS 属性
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function (){ $("#btn").click(function(){ $("li:nth-child(odd)").css({"color":"red", "background-color":"silver", "font-weight":"bold"}); }); }) </script> </head> <body> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>jQuery</li> <li>Vue.js</li> </ul> <input id="btn" type="button" value="设置" /> </body> </html>默认情况下,预览效果如图 5 所示。
图 5:默认效果
图 6:点击按钮后效果
$()css({"color":"red", "background-color":"silver", "font-weight":"bold"});
上面这句代码其实可以等价于:
$().css("color", "red); $().css("background-color", "silver"); $().css("font-weight", "bold");
所有教程
- C语言入门
- C语言编译器
- C语言项目案例
- 数据结构
- C++
- STL
- C++11
- socket
- GCC
- GDB
- Makefile
- OpenCV
- Qt教程
- Unity 3D
- UE4
- 游戏引擎
- Python
- Python并发编程
- TensorFlow
- Django
- NumPy
- Linux
- Shell
- Java教程
- 设计模式
- Java Swing
- Servlet
- JSP教程
- Struts2
- Maven
- Spring
- Spring MVC
- Spring Boot
- Spring Cloud
- Hibernate
- Mybatis
- MySQL教程
- MySQL函数
- NoSQL
- Redis
- MongoDB
- HBase
- Go语言
- C#
- MATLAB
- JavaScript
- Bootstrap
- HTML
- CSS教程
- PHP
- 汇编语言
- TCP/IP
- vi命令
- Android教程
- 区块链
- Docker
- 大数据
- 云计算