js增删class的方法
接下来我来介绍两种方法
我们先来一段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的方法的更多相关文章
- 由js apply与call方法想到的js数据类型(原始类型和引用类型)
原文地址:由js apply与call方法想到的js数据类型(原始类型和引用类型) js的call方法与apply方法的区别在于第二个参数的不同,他们都有2个参数,第一个为对象(即需要用对象a继承b, ...
- iOS之在webView中引入本地html,image,js,css文件的方法 - sky//////////////////////////////////////ZZZZZZZZZZZZZZZ
iOS之在webView中引入本地html,image,js,css文件的方法 2014-12-08 20:00:16CSDN-sky_2016-点击数:10292 项目需求 最近开发的项 ...
- 原生js获取鼠标坐标方法全面讲解-zmq
原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:eve ...
- js巧用apply方法实现数组最值以及合并
尽管js的apply方法在平常的使用中并不多见,但是在某些地方使用的还是很有帮助性的,这里就和大家说两个比较实用的例子:1.数组最大最小值 求数组中的最大最小值,js有相应的方法:Math.min() ...
- <js>实现回车键登陆方法,并处理谷歌与火狐不兼容的问题
1.在body中添加onkeydown事件 <body onkeydown="keyLogin(event);">2.使用js相应登陆添加方法//添加回车登陆事件 fu ...
- js中的tostring()方法
http://blog.sina.com.cn/s/blog_85c1dc100101bxgg.html js中的tostring()方法 (2013-11-12 11:07:43) 转载▼ 标签: ...
- js跳转页面方法大全
js跳转页面方法大全<span id="tiao">3</span><a href="javascript:countDown"& ...
- 常见JS(JavaScript)冲突解决方法
1.一般JS冲突解决办法 a.最容易出现的就是js的命名冲突 ①.变量名冲突 变量有全局变量和局部变量当全局变量变量和局部变量名称一致时,就会js冲突,由于变量传递数值或地址不同就会产生JavaScr ...
- MyEclipse取消验证Js的两种方法
MyEclipse取消验证Js的两种方法 作者: 字体:[增加 减小] 类型:转载 通过js写一个web工程的相关页面时感觉很卡,修改内存也不行下面有两种解决方法,大家可以尝试下 前言:有时我们通过j ...
随机推荐
- SpringBoot学习(1) - 日志
package com.study.spring_boot_log; import org.springframework.boot.SpringApplication; import org.spr ...
- provider networks和self-service networks
Provider Network 服务布局 Self-Service Network 网络布局: 网络布局 Provider Networks概述 Provider networks - Conne ...
- javaIO笔记
原创 File类 实例化 new File(path); File.separator 分隔符 创建文件的常规做法
- Shell:setfacl缩小普通用户的权限
简介 我们在使用jumpserver的过程中,会向主机推送普通用户,但普通用户有上传下载文件的权限,要想对这些权限进行管控就比较困难,之前考虑通过将$PATH变量下的命令的权限设置为750,设置完发现 ...
- 搭建 Kubernetes 集群
1.节点规划 master节点:192.168.188.135 node 节点:(node1)192.168.188.136,(node2)192.168.188.137 2.禁用SELinux ...
- 动态主机配置协议-DHCP
一.DHCP 概述 当局域网中有大量的PC时.如果我们逐个为每台PC去手动配置IP.那这就是一个吃力也未必讨好的办法 累死你 而DHCP 刚好可以解决这个问题.DHCP全称(动态主机配置协议).使用的 ...
- SQL基础语法—update语句
1 update语句介绍 update语句用来修改表中的数据内容 Single-table syntax: UPDATE [LOW_PRIORITY] [IGNORE] table_reference ...
- 怎么理解Laravel的核心架构
使用过larave框架的朋友都知道laravel框架里面除了提供一些基本的功能(如控制器.视图.模型)之外,还有中间件.门面.契约等,这些东西是如何在laravel框架运用起来的呢?今天就和大家详聊一 ...
- 20200118--python学习第十一天
今日内容 函数小高级 lambda表达式 内置函数 内容回顾 1.函数基本结构 2.参数 形参 基本参数:def func(a1,a2):pass 默认值:def func(a1,a2=123):pa ...
- python-nmap 使用
安装 [root@localhost ~]# yum -y install nmap [root@localhost ~]# pip install python-nmap 使用 import nma ...