jQuery Css类
2024-10-08 02:31:41
通过 jQuery,可以很容易地对 CSS 元素进行操作
jQuery 操作 CSS
jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些:
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
- css() - 设置或返回样式属性
实例样式表
下面的样式表将用于本页的所有例子:
.important
{
font-weight:bold;
font-size:xx-large;
} .blue
{
color:blue;
}
jQuery addClass() 方法
下面的例子展示如何向不同的元素添加 class 属性。当然,在添加类时,您也可以选取多个元素:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});
});
</script>
<style type="text/css">
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
</style>
</head>
<body> <h1>标题 1</h1>
<h2>标题 2</h2>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<div>这是一些重要的文本!</div>
<br>
<button>为元素添加 class</button> </body>
</html>
您也可以在 addClass() 方法中规定多个类:
$("button").click(function(){
$("body div:first").addClass("important blue");
});
jQuery removeClass() 方法
下面的例子演示如何在不同的元素中删除指定的 class 属性:
$("button").click(function(){
$("h1,h2,p").removeClass("blue");
});
jQuery toggleClass() 方法
下面的例子将展示如何使用 jQuery toggleClass() 方法。该方法对被选元素进行添加/删除类的切换操作:
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});
最新文章
- NOIP水题合集[3/未完待续]
- 嵌入式linux自动登录
- PHP isset()与empty()的使用区别详解
- UVa(11292),贪心水题
- 几种Menu和几种对话框
- 中断服务程序不用interrupt关键字也可实现中断,该关键字是否必须?
- 【Druid】 阿里巴巴推出的国产数据库连接池com.alibaba.druid.pool.DruidDataSource
- CentOS 6.5 + Nginx 1.8.0 + PHP 5.6(with PHP-FPM) 负载均衡源码安装 之 (二)PHP(PHP-FPM)安装篇
- Codeforces round #353div2 C
- mongodb操作:利用javaScript封装db.collection.find()后可调用函数源码解读
- C语言——第十四、十五周作业
- linu下C语言之BMP图片操作编程(下)
- (三十九)数据的持久化存储-plist实现(XML属性表)
- serialize()与serializeArray()
- Spatial Transformer Networks
- .Net连接字符串设置连接池大小显著提高数据库速度
- C# byte array 跟 string 互转
- APP的案例分析
- 【转】 iOS播放视频时候,忽略设备静音按钮
- PHP两种实现无级递归分类的方法