接下来我来介绍两种方法

我们先来一段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. (转)Gamma分布,Beta分布,Multinomial多项式分布,Dirichlet狄利克雷分布

    1. Gamma函数 首先我们可以看一下Gamma函数的定义: Gamma的重要性质包括下面几条: 1. 递推公式: 2. 对于正整数n, 有 因此可以说Gamma函数是阶乘的推广. 3.  4.  ...

  2. 面试官:"谈谈分库分表吧?"

    转自:学习Java的小姐姐 www.cnblogs.com/chenchen0618/p/11624480.html 1.什么是分库分表 从字面上简单理解,就是将原本存储在一个库的数据分块存储在多个库 ...

  3. VS2013下搭建SDL开发环境

    什么是SDL? SDL是 "Simple DirectMedia Layer"的缩写,它是一个开源的项目. 为多媒体编程而设计 SDL是一个跨平台的多媒体库,它通过OpenGL和2 ...

  4. QtGui实现计算圆的面积

    dialog.h #ifndef DIALOG_H #define DIALOG_H #include <QtWidgets/QDialog> #include <QtWidgets ...

  5. 从免费的物联网防火墙hihttps谈机器学习之生成对抗规则

    hihttps是一款基于MQTT的免费的物联网防火墙,同时也是web应用防火墙,既支持传统的检测功能如SQL注入.XSS.恶意漏洞扫描.密码暴力破解.CC.DDOS等),又支持无监督机器学习,自主对抗 ...

  6. C语言学习笔记--关于指针的一些小认知

    int main() { int i; char *str = "hu mian yuan"; int length = strlen(str); printf("str ...

  7. python strip()方法使用

    描述 python strip() ,用于去除述字符串头尾指定字符(默认为空格或换行符)或字符序列. 注意:此方法只能去除头尾的空格或是换行符,不能去除中间的. 语法: str.strip([char ...

  8. Codeforces_733_C

    http://codeforces.com/problemset/problem/733/C 从后往前一个个b对应一组组a. #include<iostream> #include< ...

  9. JDK11和JDK8类加载器的区别

    如下代码: public class Test07 { public static void main(String[] args) throws ClassNotFoundException { / ...

  10. Luogu P1280 尼可的任务(dp)

    题意: 时间为n,有k个任务,每个任务有一个开始时间和持续时间,从第一分钟开始,如果有开始的任务就要做,问最大空闲时间 n,k<=1e5 思路: 设 dp[i]为i~n时间中最大空闲时间,vec ...