.addClass(),.removeClass(),.toggleClass()的区别

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了.addClass(),.removeClass(),.toggleClass()的区别相关的知识,希望对你有一定的参考价值。

.addClass("className")方法是用来给指定元素增加类名,也就是说给指定的元素追加样式;

可以同时添加多个类名,空格符隔开

$("selector").addClass("className1 className2");

.removeClass("className")方法是用来给指定的元素移除类名,也就是说给指定元素移除样式;

可以同时移除多个类名,空格符隔开

$("selector").removeClass("className1 className2");

$("selector").removeClass();//这种方法将移除选择定元素的所有类名

.toggleClass("className")方法是用来给指定的元素添加或者移除类名(如果类名存在则移除,不存在则增加)

toggleClass()方法和addClass()方法一样,可以同时加多个或同时移除多个类名,不过他们之间需要用空格隔开,如:

$("selector").toggleClass("className1 className2");
//上面表达式等于
$("selector").toggleClass("className1").toggleClass("className2");

无参数时,自动删除、恢复全部className,也可以传递一个布尔值,true为恢复class,false为删除class

三者之间的关系如下:

$("selector").toggleClass("className");
//等同于
if($("selector").hasClass("className")){
    $(this).removeClass("className");
} else {
    $(this).addClass("className");
}
//也等同于
$("selector").hasClass(‘className‘) ? $("selector").removeClass(‘className‘) : $("selector").addClass(‘className‘);

  

 

 

以上是关于.addClass(),.removeClass(),.toggleClass()的区别的主要内容,如果未能解决你的问题,请参考以下文章

jQuery的addClass,removeClass和toggleClass方法

.addClass(),.removeClass(),.toggleClass()的区别

jQuery学习笔记 .addClass()/.removeClass()简单学习

javascript addClass removeClass hasClass #js

javascript addClass removeClass hasClass #js

JavaScript addClass,removeClass,hasClass