JQuery动态添加/删除class样式

有时我们会对某个控件的class样式进行获取、添加、修改、删除。下面是简单整理的一些实例用法:

html样例代码如下:

1.获取样式名

var class_name=$(".pro_list").attr("class");
结果:"pro_list fl cont"

2.添加样式(给第一个li添加样式"current",这里的添加是追加)

$(".pro_list li").eq(0).addClass("current");
执行后第一个li就变成如下:
  • 3.修改样式,其实就是将class属性重新赋值

    $("ul").attr("class", "mylist");
    执行结果:
    

    4.删除样式
    1)删除某个样式

    $("ul").removeClass("fl");
    执行结果:
    

    2)删除两个样式

    方法一:
    $("ul").removeClass("fl").removeClass("cont");
    方法二:
    $("ul").removeClass("fl cont");
    执行结果:
    

    3)移除全部样式

    $("ul").removeClass();
    

    5.判断是否含有某个样式

    if($("ul").hasClass("cont")){
    	alert(true);
    }
    else{
    	alert(false);
    }
    方法二:
    if($("ul").is(".cont")){
    	alert(true);
    }
    else{
    	alert(false);
    }
    

    6.样式名显示隐藏切换显示

    $("ul li").toggleClass("current");
    

    你可能感兴趣的:(jquery)