JQ修改css样式小结

1、修改标签属性

$(选择器).attr('style','属性：属性值')；// 如：$('.attr').attr('style','color:red');

注：不过，此方法有一个不足之处。即：不论是你修改样式还是添加别的样式，都会覆盖之前所有的样式。如需保留之前的样式，则需要重新写一遍。

2、修改标签className

• 添加CSS类（addClass('类名')）

$(选择器).addClass('类名')；// 如：$('.attr').addClass('color');

• 删除CSS类（removeClass('类名')）

$(选择器).removeClass('类名')；// 如：$('.attr').removeClass('color');

• 添加或者移除CSS类（toggleClass('类名')）
  

$(选择器).toggleClass('类名')；// 如：$('.attr').toggleClass('color');

注：如果css类存在，则删除css类；反之，则添加css类。

3、直接修改CSS样式

$(选择器).css('属性','属性值')；// 如：$('.attr').css('color','red');

注：修改一个样式属性。

$(选择器).css({'属性':'属性值',['属性':'属性值']})；// 如：$('.attr').css({'color':'red','font-size':'12px'});

注：修改一个或者多个样式属性。‘[]’表示可省略。

4、修改样式表的内容

$(选择器).css('cssText','属性:属性值')；// 如：$('.attr').css('cssText','color:red');

注：可修改样式表中的样式，有时通过直接修改css样式时无法在其属性值后面添加“!important”，这时就可以用此方法实现修改样式。