JQuery系列之样式操作

---

1、操作 css 方法

1.1、css(name|pro|[,val|fn])

1.1.1、概述

访问匹配元素的样式属性。

jQuery 1.8中，当你使用CSS属性在css()或animate()中，我们将根据浏览器自动加上前缀(在适当的时候)，比如("user-select", "none"); 在Chrome/Safari浏览器中我们将设置为"-webkit-user-select"，Firefox会使用"-moz-user-select"，IE10将使用"-ms-user-select"。

1.1.2、语法

1.1.2.1、语法1

selector.css(name);
1

1.1.2.1.1、参数

name 既可以是字符串也可以是数组；

• name：String 要访问的属性名称；
• name：Array 一个或多个CSS属性组成的一个数组；

1.1.2.2、语法2

selector.css(properties);
1

1.1.2.2.1、参数

• properties：Map 要设置为样式属性的名/值对。

1.1.2.3、语法3

selector.css(name, value);
1

1.1.2.3.1、参数

• name，value：String，Number 属性名，属性值

1.1.2.4、语法4

selector.css(name, fn);
1

1.1.2.4.1、参数

• name：String 属性名
• fn：Function 此函数返回要设置的属性值。接受两个参数，index为元素在对象集合中的索引位置，value是原先的属性值。

1.1.3、示例

取得第一个段落的color样式属性的值。

$("p").css("color");
1

将所有段落的字体颜色设为红色并且背景为蓝色。

$("p").css({ color: "#ff0011", background: "blue" });
1

将所有段落字体设为红色

$("p").css("color", "red");
1

逐渐增加div的大小

$("div").click(function () {
	$(this).css({
		width: function (index, value) {
			return parseFloat(value) * 1.2;
		},
		height: function (index, value) {
			return parseFloat(value) * 1.2;
		}
	});
});
1
2
3
4
5
6
7
8
9
10

2、设置类样式方法

2.1、addClass(class|fn)

2.1.1、概述

为每个匹配的元素添加指定的类名。

2.1.2、语法

selector.addClass(class|fn)
1

2.1.2.1、参数

• class：String 一个或多个要添加到元素中的CSS类名， 用空格分开
• function(index, class) Function 此函数必须返回一个或多个空格分隔的class名。接受两个参数，index参数为对象在这个集合中的索引值，class参数为这个对象原先的class属性值。

2.1.3、示例

为匹配的元素加上 ‘selected’ 类

$("p").addClass("selected");
$("p").addClass("selected1 selected2");
1
2

给li加上不同的class

<ul>
	<li>Helloli>
	<li>Helloli>
	<li>Helloli>
ul>
1
2
3
4
5

$("ul li:last").addClass(function () {
	return "item-" + $(this).index();
});
1
2
3

2.2、removeClass([class|fn])

2.2.1、概述

从所有匹配的元素中删除全部或者指定的类。

2.2.2、语法

selector.removeClass([class|fn])
1

2.2.2.1、参数

• class：String 一个或多个要删除的CSS类名， 用空格分开
• function(index, class) Function 此函数必须返回一个或多个空格分隔的class名。接受两个参数，index参数为对象在这个集合中的索引值，class参数为这个对象原先的class属性值。

2.2.3、示例

从匹配的元素中删除 ‘selected’ 类

$("p").removeClass("selected");
1

删除匹配元素的所有类

$("p").removeClass();
1

删除最后一个元素上与前面重复的class

$("li:last").removeClass(function () {
		return $(this).prev().attr("class");
	});
1
2
3

2.3、toggleClass(class|fn[,sw])

2.3.1、概述

如果存在（不存在）就删除（添加）一个类。

2.3.2、语法1

selector.toggleClass(class);
1

2.3.2.1、参数

• class：String CSS类名；

2.3.3、语法2

selector.toggleClass(class, sw);
1

2.3.3.1、参数

• class： String 要切换的CSS类名.
• sw：Boolean 用于决定元素是否包含class的布尔值。

2.3.4、语法3

selector.toggleClass(sw);
1

2.3.4.1、参数

• sw：Boolean 用于决定元素是否包含class的布尔值。

2.3.5、语法4

selector.toggleClass(fn, sw);
1

2.3.5.1、参数

• fn：Function 用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数。
• sw：Boolean 一个用来判断样式类添加还是移除的 boolean 值。

2.3.6、示例

为匹配的元素切换 ‘selected’ 类

$("p").toggleClass("selected");
1

每点击三下加上一次 ‘highlight’ 类

<strong>jQuery 代码:strong>
1

var count = 0;
$("p").click(function () {
	$(this).toggleClass("highlight", count++ % 3 == 0);
});
1
2
3
4

根据父元素来设置class属性

$("div.foo").toggleClass(function () {
	if ($(this).parent().is(".bar")) {
		return "happy";
	} else {
		return "sad";
	}
});
1
2
3
4
5
6
7

写在最后

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！