jQuery对类的操作.addClass()/.removeClass()/.hasClass()方法

.addClass()：给DOM元素添加类名，间接控制样式

.removeClass()：移除DOM元素的样式

.hasClass()：判断DOM元素是否有某类名

【例】代码功能：点击换肤。原理：设置active样式，判断DOM元素是否有active类名，若没有则添加类名，有则移除类名

html代码如下

<div class="wrapper"><div class="demo">我抓不住这世界的美好，只能装作万事顺遂</div><div class="demo">我只怕从来没有在你的世界出现过</div><div class="demo">我喜欢你，认真且怂，从一而终</div>
</div>

css代码

.wrapper .demo {width: 350px;height: 50px;line-height: 50px;text-align: center;border-radius: 20px;background: linear-gradient(to right, steelblue, cadetblue );font-size: 16px;color: #fff;margin-bottom: 5px;
}
.wrapper.active .demo{background-color: darkseagreen;background: linear-gradient(to right, teal, darkseagreen);
}

js代码

<script src="./jquery.js"></script>
<script>
$('.wrapper').click(function (index, ele) {if ($(this).hasClass('active')) {$(this).removeClass('active');} else {$(this).addClass('active');}
})
</script>

结果

点击后

jQuery对类的操作.addClass()/.removeClass()/.hasClass()方法相关推荐

原生js实现addClass,removeClass,hasClass方法
第一部分:原生js实现addClass,removeClass,hasClass方法 function hasClass(elem, cls) {cls = cls || '';if (cls.rep ...
[js进阶]原生js实现addClass,removeClass,hasClass方法
addClass function addClass(obj, cls){//获取 class 内容.var obj_class = obj.className,//判断获取到的 class 是否为空 ...
简答String类的操作特点以及static方法的注意事项
1.String类的操作特点一.String类有两种实例化方式 |--- 方式一: 直接赋值的实例化方式:直接赋值,开辟一块内存空间,并且对象可以入池. |--- 方式二:构造方法的实例化方式:将会 ...
前端提高篇(八十六)：jQuery的class属性操作addClass()与removeClass()、hasClass()、toggleClass()
1.addClass()与removeClass()基本使用 addClass:添加class:removeClass:移除class,返回this对象,支持链式操作 $('div').addClas ...
jq之类名相关操作(addclass、removeClass、hasClass)及深意
文章目录 addclass removeClass hasClass addclass <!DOCTYPE html> <html lang="en">&l ...
UML的类图、时序图表示方法以及惯例
UML 类图图示样例(总图) 一.类图类图分三层: 第一层显示类的名称. 如果是抽象类,则就用斜体显示 .第二层是类的特性,通常就是字段和属性. 第三层是类的操作,通常是方法或行为. 注意前面的符号 ...
jquery中的class函数addClass，removeClass，toggle，hasClass
全栈工程师开发手册 (作者:栾鹏) jquery系列教程2-style样式操作全解 jquery通过class函数操作元素样式 jquery的class函数,包括addClass,removeClas ...
02属性操作_jqueryCSS类操作(addClass()、removeClass()、toggleClass())
02属性操作_jqueryCSS类操作(addClass().removeClass().toggleClass()) 代码演示 <!DOCTYPE html> <html>& ...
类操作是什么意思？jQuery的类操作教程分享
类操作就是通过操作元素的类名进行元素样式操作,当元素样式比较复杂时,如果通过css()方法实现,需要在CSS里编写很长的代码,既不美观也不方便.而通过写一个类名,把类名加上或去掉就会显得很方便.下面通 ...

jQuery对类的操作.addClass()/.removeClass()/.hasClass()方法

jQuery对类的操作.addClass()/.removeClass()/.hasClass()方法相关推荐

最新文章

热门文章