接下来我来介绍两种方法

我们先来一段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. SpringBoot学习(1) - 日志

    package com.study.spring_boot_log; import org.springframework.boot.SpringApplication; import org.spr ...

  2. provider networks和self-service networks

    Provider Network 服务布局 Self-Service Network 网络布局: 网络布局 Provider Networks概述  Provider networks - Conne ...

  3. javaIO笔记

    原创 File类 实例化 new File(path); File.separator 分隔符 创建文件的常规做法

  4. Shell:setfacl缩小普通用户的权限

    简介 我们在使用jumpserver的过程中,会向主机推送普通用户,但普通用户有上传下载文件的权限,要想对这些权限进行管控就比较困难,之前考虑通过将$PATH变量下的命令的权限设置为750,设置完发现 ...

  5. 搭建 Kubernetes 集群

    1.节点规划 master节点:192.168.188.135 node   节点:(node1)192.168.188.136,(node2)192.168.188.137 2.禁用SELinux ...

  6. 动态主机配置协议-DHCP

    一.DHCP 概述 当局域网中有大量的PC时.如果我们逐个为每台PC去手动配置IP.那这就是一个吃力也未必讨好的办法 累死你 而DHCP 刚好可以解决这个问题.DHCP全称(动态主机配置协议).使用的 ...

  7. SQL基础语法—update语句

    1 update语句介绍 update语句用来修改表中的数据内容 Single-table syntax: UPDATE [LOW_PRIORITY] [IGNORE] table_reference ...

  8. 怎么理解Laravel的核心架构

    使用过larave框架的朋友都知道laravel框架里面除了提供一些基本的功能(如控制器.视图.模型)之外,还有中间件.门面.契约等,这些东西是如何在laravel框架运用起来的呢?今天就和大家详聊一 ...

  9. 20200118--python学习第十一天

    今日内容 函数小高级 lambda表达式 内置函数 内容回顾 1.函数基本结构 2.参数 形参 基本参数:def func(a1,a2):pass 默认值:def func(a1,a2=123):pa ...

  10. python-nmap 使用

    安装 [root@localhost ~]# yum -y install nmap [root@localhost ~]# pip install python-nmap 使用 import nma ...