jQuery--样式操作（addClass()、removeClass()、toggleClass()、css()）详解

深碍√TFBOYSˉ_ 2021-08-13 19:43 348阅读 0赞

#### 样式操作 ####

在HTML代码中，通过class属性指定HTML标签的样式名；在jQuery中，可以使用attr()方法操作元素的class属性，以获取或改变元素的样式。

**1. addClass()方法：**  
addClass()方法用于对一个或多个匹配元素追加样式，其语法格式如下：

addClass(className)
    addClass(className1 className2 ... classNameN)
    addClass(function(index, oldClassName))

*  className：表示需要追加的样式名
 *  className1、className2,…,ClassNameN：表示可以同时追加多个样式，样式名之间使用空格隔开
 *  参数function(index, oldClassName)：表示使用函数的返回值作为当前位置的样式，index表示当前元素在集合中的索引值，oldClassName表示当前元素在修改之间的样式名

示例：

//追加baseClass样式
    $("p[title='desc']").addClass("baseClass");
    //追加baseClass和fontColor样式
    $("p[title='desc']").addClass("caseClass fontColor");

**2. removeClass()方法：**  
removeClass()方法用于移除匹配元素的一个或多个样式，也可以一次性移除元素的所有样式，其语法格式如下：

removeClass()
    removeClass(className)
    removeClass(className className2 ... classNameN)

*  无参方法用于移除匹配元素的所有样式
 *  className：表示需要删除的样式名
 *  className1、className2,…,ClassNameN：表示可以同时移除多个样式，样式名之间使用空格隔开

示例：

<!doctype html>
    <html>
    
    	<head>
    		<meta charset="utf-8">
    		<title>jQuery基本操作-样式操作</title>
    		<script type="text/javascript" src="js/jquery-1.x.js"> </script>
    		<style type="text/css"> .titleClass { font-size: 20px; font-weight: bold; } .baseClass { padding-left: 20px; background-color: #DDD; } .fontSize { font-size: 16px; } .fontColor { color: #363; } .p0 { color: red; } .p1 { color: blue; } .p2 { color: green; } </style>
    	</head>
    
    	<body>
    		<p id="articleTitle">jQuery操作元素样式</p>
    		<hr />
    		<p title="desc">可以使用attr()方法操作元素的class属性，以获取或改变标签的样式。</p>
    		<p title="desc">除此之外，jQuery还提供了addClass()、removeClass()和toggleClass()方法。</p>
    		<p title="desc" id="lastContent">使用addClass()方法可以为一个或多个匹配的页面元素追加样式。</p>
    		<input type="button" value="移除样式" onClick="removeClass()" />
    		<script type="text/javascript"> $(function(e) { $("#articleTitle").addClass("titleClass"); $("p[title='desc']").addClass("baseClass fontColor"); //根据位置添加不同的样式 $("p[title='desc']").addClass(function(index, oldClass) { console.log(index + " " + oldClass); return 'p' + index; }); }); function removeClass() { $("p").removeClass("fontSize"); //移除指定的样式 $("p").removeClass(); //移除所有的样式 } </script>
    	</body>
    
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70]  
**3. toggleClass()方法：**  
toggleClass()方法用于元素样式之间的重复切换，当元素指定样式存在时，将该样式移除，否则添加该样式。toggleClass()方法的语法格式如下：

toggleClass(className)
    toggleClass(className, switch)

*  className：表示需要切换的样式名
 *  switch：表示切换样式开关，默认为true，当switch为true时允许样式切换，否则不切换

示例：

//ID为userName的元素添加样式，如果存在focusClass样式则移除，没有则添加该样式
    $("#userName").toggleClass("focusClass");
    //第二个参数为真，样式切换为inverseColor
    $("#saleDept").toggleClass("inverseColor", true);

**4. css()方法：**  
在jQuery1.9+中新增了css()方法，用于返回第1个匹配元素的CSS样式，或设置所有匹配元素的样式。css()方法格式如下：

css(attrName)
    css(key, value)
    css(properties)
    css(sttrName, function(index, oldValue))

*  attrname：表示要访问的属性名称
 *  key、value：用于设置元素的某一样式，key表示属性名，value表示属性值
 *  properties：用于设置元素的某些样式，为Map类型的键值对所构成的集合
 *  参数function(index, oldClassName)：表示使用函数的返回值作为当前位置的样式，index表示当前元素在集合中的索引值，oldClassName表示当前元素在修改之间的样式名

示例：

<!doctype html>
    <html>
    
    	<head>
    		<meta charset="utf-8">
    		<title>jQuery基本操作-样式操作</title>
    		<script type="text/javascript" src="js/jquery-1.x.js"> </script>
    		<style type="text/css"> .baseClass { background-color: #DDD; } .focusClass { background-color: #FFF; border: 2px dotted #FF0000; } .inverseColor { color: #FFF; background-color: #000; } </style>
    	</head>
    
    	<body>
    		销售人员：<input type="text" value="请输入销售人员名称" id="userName" class="baseClass" onFocus="userNameOnFocus()" /><br/> 销售部门：
    		<input type="text" value="请输入销售部门" id="saleDept" /><br/>
    		<input type="button" value="更换销售部门样式(点击3次)" onClick="changeDept()" />
    		<hr/>
    		<img src="images/flower2.png" width="300px" /><br />
    		<input type="button" value="放大图片" onClick="enlargeImage()" />
    		<input type="button" value="缩小大图片" onClick="lessenImage()" />
    		<script type="text/javascript"> var count = 0; function userNameOnFocus() { $("#userName").toggleClass("focusClass"); } function changeDept() { $("#saleDept").toggleClass("inverseColor", ++count % 3 == 0); } function enlargeImage() { //alert($("img").css("width")); $("img").css({ width: function(index, value) { return parseFloat(value) * 1.1; }, height: function(index, value) { return parseFloat(value) * 1.1; } }); } function lessenImage() { $("img").css({ width: function(index, value) { return parseFloat(value) * 0.9; }, height: function(index, value) { return parseFloat(value) * 0.9; } }); } </script>
    	</body>
    
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70]: /images/20210813/c72efb89cfe942959067c150a88a6791.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70 1]: /images/20210813/9b0780b5a0754d4fa149222acb417a0e.png