接下来我来介绍两种方法

我们先来一段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. 一文教你一次性完成Helm 3迁移

    2019年,Kubernetes软件包管理器--Helm发布了最新版本Helm 3,并且该版本已经stable.Helm 3中的一些关键特性我们在之前的文章中已经介绍过,其中一些功能吸引了许多开发人员 ...

  2. SpringBoot性能优化之HikariCP连接池

    以前一直使用阿里Druid数据库连接池,这段时间听说有个号称速度最快.代码最简的后起之秀——HikariCP,于是动手实践一下 1.依赖如下: <?xml version="1.0&q ...

  3. 配置微软Azure大数据HDInsight云集群

    配置微软Azure大数据HDInsight云集群,存储账户.托管标识等问题也都参考官方文档解决了. 原文在我的开源中国博客 https://my.oschina.net/finchxu/blog/31 ...

  4. MySql新版本安装配置

    版本:mysql-5.7.16-winx64 平台Windows 7 x64 1.进入mysql主目录(建议将其移到C或D盘的根目录,并改名为mysql) 2.配置path环境变量(如D:\JAVA\ ...

  5. CCF_201604-2_俄罗斯方块

    用一个4*2的数组记录方块的位置,每一次移动前判断每个方块位置下面是否已有方块,直到不能移动,将该数组更新到原来的图上,输出即可. #include<cstdio> #include< ...

  6. constrainlayout布局

    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/r ...

  7. 必须收藏的MySQL高性能优化实战总结!

    MySQL对于很多程序员来说,是一个非常棘手的问题,多数情况都是因为对数据库出现问题的情况和处理思路不清晰.在进行MySQL的优化之前必须要了解的就是MySQL的查询过程,很多的查询优化工作实际上就是 ...

  8. Intel发布神经网络压缩库Distiller:快速利用前沿算法压缩PyTorch模型——AttributeError: module ‘tensorboard' has no attribute 'lazy'

    转载自:CSDN Nine-days   近日,Intel 开源了一个用于神经网络压缩的开源 Python 软件包 Distiller,它可以减少深度神经网络的内存占用.加快推断速度及节省能耗.Dis ...

  9. 《Python学习手册 第五版》 -第6章 动态类型

    本章主要讲述变量.对象.引用三者直接的关联及区别,详细说明了在变量赋值的操作中,计算机内部到底发生了什么,有哪些是不被人察觉和需要明确了解的 1.先从最简单的赋值语句开始 a=3 这一句,基本就能涵盖 ...

  10. MingGW Posix VS Win32 - 明瓜娃的毒因

    MinGW-posix和win32纠缠的瓜娃子 官方首席佛偈(SourceForge)的官网下载页 法克油啊,让我一个小白情何以堪. 盘TA wiki posix wiki中文-UNIX API标准 ...