JQ修改css样式小结

来源:互联网 发布:网络诈骗的看法 编辑:程序博客网 时间:2024/05/29 17:52

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”,这时就可以用此方法实现修改样式。


如果你想通过cssText属性批量修改样式,可访问:http://www.cnblogs.com/snandy/archive/2011/03/12/1980444.html


此文主用于笔记,以免以后忘记……文中重点在于:cssText的用法


0 0