js实现addClass添加样式

Posted 2023-04-23

参考技术A 今天和大家分享如何用原生js实现添加样式功能

jQuery里封装的有addClass函数，调用十分方便，那么用JS如何实现呢，下面我们来介绍下。

首先是CSS部分

写一个新的class用来添加

html部分

一个没有样式的div

script部分

声明addClass函数，把标签元素和新的class作为参数传进去，进行判断，如果标签元素原来有样式，那么就增加一个样式，如果没有样式，那么就把标签元素的样式设为传进来的样式。

调用函数，这样就实现了样式的添加。

更多前端内容 请 点击关注 点击关注

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

使用jQuery或javaScript来动态改变页面中某个或部分元素的样式，为了实现这样的功能，我们往往都是使用jQuery或javaScript来控制HTML中DOM的类名（class）从而实现增加或删除某一样式

在jQuery中提供了三种方法来实现这样的效果：.addClass()方法，.removeClass()方法

.addClass()方法

 

主要用于在jQuery中来添加一个或多个类名来渲染页面

添加多个类名时，他们之间需要用空格隔开

我们还可以使用函数的方法来给指定的元素添加类名：

$("selector").addClass(function(index,class){});

这种方法城要注意一点，此函数必须返回一个或多个空格分隔的class名。接受两个参数，index参数为对象在这个集合中的索引值，class参数为这个对象原先的class属性值

.removeClass()方法

主要用于在jQuery中来移除一个或多个类名

toggleClass——添加或者移除className

前面的addClass()和removeClass()分别只能添加和者移除className，但是这个toggleClass()方法却不同，如果元素有这个类名，它将补移除；反之，如果元素没有这个类名，那么将加上这个类名

 

• .addClass("className")方法是用来给指定元素增加类名，也就是说给指定的元素追加样式；
• .removeClass("className")方法是用来给指定的元素移除类名，也就是说给指定元素移除样式；
• .toggleClass("className")方法是用来给脂定的元素增加或移除类名（如果元素的类名存在就移除，如果不存在就增加），也就是说用来给指定的元素进行样式切换（如果元素存在样式则去掉，如果不存在则加上样式）。

 

此供自己学习，多借鉴前人！