修改css样式

修改元素的样式, 我们可以修改元素CSS类或者直接修改元素的样式.

一个元素可以应用多个css类, 但是不幸的是在DOM属性中是用一个以空格分割的字符串存储的, 而不是数组. 所以如果在原始javascript时代我们想对元素添加或者删除多个属性时, 都要自己操作字符串.
jQuery让这一切变得异常简单. 我们再也不用做那些无聊的工作了.

一、修改CSS类

下表是修改CSS类相关的jQuery方法:

名称	说明	实例
addClass( classes )	为每个匹配的元素添加指定的类名	为匹配的元素加上 'selected' 类: $("p").addClass("selected");
hasClass( class )	判断包装集中是否至少有一个元素应用了指定的CSS类	判断包装集中是否至少有一个元素应用了指定的CSS类
removeClass( [classes] )	从所有匹配的元素中删除全部或者指定的类	从匹配的元素中删除 'selected' 类: $("p").removeClass("selected");
toggleClass( class )	如果存在（不存在）就删除（添加）一个类	为匹配的元素切换 'selected' 类: $("p").toggleClass("selected");
toggleClass( class, switch )	当switch是true时添加类, 当switch是false时删除类	每三次点击切换高亮样式: var count = 0; $("p").click(function(){ $(this).toggleClass("highlight", count++ % 3 == });

使用上面的方法, 我们可以将元素的CSS类像集合一样修改, 再也不必手工解析字符串.

注意addClass( class ) 和removeClass( [classes] ) 的参数可以一次传入多个css类, 用空格分割,比如:

1	$("#btnAdd").bind("click", function(event) { $("p").addClass("colorRed borderBlue"); });

 

removeClass方法的参数可选, 如果不传入参数则移除全部CSS类:

1	$("p").removeClass()

二、修改ｃｓｓ样式

同样当我们想要修改元素的具体某一个CSS样式,即修改元素属性"style"时, jQuery也提供了相应的方法:

名称	说明	实例
css( name )	访问第一个匹配元素的样式属性	取得第一个段落的color样式属性的值: $("p").css("color");
css( properties )	把一个“名/值对”对象设置为所有匹配元素的样式属性。 这是一种在所有匹配的元素上设置大量样式属性的最佳方式	将所有段落的字体颜色设为红色并且背景为蓝色: $("p").css({ color: "#ff0011", background: "blue" }
css( name, value )	在所有匹配的元素中，设置一个样式属性的值。 数字将自动转化为像素值	将所有段落字体设为红色: $("p").css("color","red");