接下来我来介绍两种方法

我们先来一段HTMl代码

<div id="bb">  你好呀   </div>

接下来我们再来一段css样式

.ob
{
color:red;
}

好了,下面我们进入js开始说明方法了

第一种方法:

let bb = document.getElementById("bb");
bb.setAttribute("class","ob"); //此时div的字体已经变红 //增加了ob class类 //如果我们要进行查看呢
console.log(bb.getAttribute("class")); //打印出来的是ob

第二种方法:

let bb = document.getElementById("bb");
bb.classList.add("ob"); //此时增加了一个class类,名为ob //那要进行删除时我们该怎么办呢,看下 bb.classList.remove("ob");

但是这种方法如果是有列表时怎么办呢?

那么就使用遍历的方式确定的那个标签再进行添加样式即可完成

js增删class的方法的更多相关文章

  1. 由js apply与call方法想到的js数据类型(原始类型和引用类型)

    原文地址:由js apply与call方法想到的js数据类型(原始类型和引用类型) js的call方法与apply方法的区别在于第二个参数的不同,他们都有2个参数,第一个为对象(即需要用对象a继承b, ...

  2. iOS之在webView中引入本地html,image,js,css文件的方法 - sky//////////////////////////////////////ZZZZZZZZZZZZZZZ

    iOS之在webView中引入本地html,image,js,css文件的方法   2014-12-08 20:00:16CSDN-sky_2016-点击数:10292     项目需求 最近开发的项 ...

  3. 原生js获取鼠标坐标方法全面讲解-zmq

    原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:eve ...

  4. js巧用apply方法实现数组最值以及合并

    尽管js的apply方法在平常的使用中并不多见,但是在某些地方使用的还是很有帮助性的,这里就和大家说两个比较实用的例子:1.数组最大最小值 求数组中的最大最小值,js有相应的方法:Math.min() ...

  5. <js>实现回车键登陆方法,并处理谷歌与火狐不兼容的问题

    1.在body中添加onkeydown事件 <body onkeydown="keyLogin(event);">2.使用js相应登陆添加方法//添加回车登陆事件 fu ...

  6. js中的tostring()方法

    http://blog.sina.com.cn/s/blog_85c1dc100101bxgg.html js中的tostring()方法 (2013-11-12 11:07:43) 转载▼ 标签: ...

  7. js跳转页面方法大全

    js跳转页面方法大全<span id="tiao">3</span><a href="javascript:countDown"& ...

  8. 常见JS(JavaScript)冲突解决方法

    1.一般JS冲突解决办法 a.最容易出现的就是js的命名冲突 ①.变量名冲突 变量有全局变量和局部变量当全局变量变量和局部变量名称一致时,就会js冲突,由于变量传递数值或地址不同就会产生JavaScr ...

  9. MyEclipse取消验证Js的两种方法

    MyEclipse取消验证Js的两种方法 作者: 字体:[增加 减小] 类型:转载 通过js写一个web工程的相关页面时感觉很卡,修改内存也不行下面有两种解决方法,大家可以尝试下 前言:有时我们通过j ...

随机推荐

  1. DRF框架之Serializer序列化器的序列化操作

    在DRF框架中,有两种序列化器,一种是Serializer,另一种是ModelSerializer. 今天,我们就先来学习一下Serializer序列化器. 使用Serializer序列化器的开发步骤 ...

  2. BJUT数字图像处理作业

    一. n的正方形图像,用FFT算法从空域变换到频域,并用频域图像的模来进行显示. 2) 使图像能量中心,对应到几何中心,并用频域图像的模来进行显示. 3)将频域图象,通过FFT逆变换到空域,并显示. ...

  3. GBM,XGBoost,LightGBM

    GBM如何调参:https://www.analyticsvidhya.com/blog/2016/02/complete-guide-parameter-tuning-gradient-boosti ...

  4. Tomcat配置多线程和配置数据库连接池

    Tomcat配置多线程和配置数据库连接池 1.  tomcat配置线程池: [root@RD2_AS yanghuihui]# cd /usr/tomcat/conf/ [root@RD2_AS co ...

  5. java架构之路-(netty专题)netty的编解码(出入战)与粘包拆包

    上次回归: 上次博客我们主要说了netty的基本使用,都是一些固定的模式去写的,我们只需要关注我们的拦截器怎么去写就可以了,然后我们用我们的基础示例,改造了一个简单的聊天室程序,可以看到内部加了一个S ...

  6. Thread.yield( )方法

    Java线程中的Thread.yield( )方法,译为线程让步.顾名思义,就是说当一个线程使用了这个方法之后,它就会把自己CPU执行的时间让掉,让自己或者其它的线程运行,注意是让自己或者其他线程运行 ...

  7. FTP - File Transfer Protocol

    FTP - File Transfer Protocol FTP 实际上使用了两个 TCP 链接. 一个作为控制信道用, 主要传输一些指令和响应, 比如 ACK 或 错误码. 另一个链接是数据信道, ...

  8. space transport protocols

    VSAT系统对TCP的改进 https://www.vsat-systems.com/broadband-satellite-internet/index.html TCP/IP over satel ...

  9. HDU 5234 背包。

    J - 10 Time Limit:1000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u Submit Statu ...

  10. 一起了解 .Net Foundation 项目 No.5

    .Net 基金会中包含有很多优秀的项目,今天就和笔者一起了解一下其中的一些优秀作品吧. 中文介绍 中文介绍内容翻译自英文介绍,主要采用意译.如与原文存在出入,请以原文为准. Couchbase Lit ...