HTML5-新增的操作类

news/2024/4/24 15:15:25/文章来源:https://blog.csdn.net/weixin_54262445/article/details/136454617

HTML5-新增的操作类

​ 以前我们通过className操作(新增、删除)类不方便,比如新增className += ‘class’,当点击几次时会重复的添加class,很冗余,操作起来也很不方便,html5新增了操作类的方法,classList。

​ 如何获取classList,我们会获得一个伪数组,保存当前元素所有的类

.red{background-color:red 
}
.blackcolor{color:black
}
let box = document.querySelector('.classname')
box.classList // 伪数组

提供方法:

  • 添加类 add()

    box.classList.add('red','blackcolor')
    
  • 删除类 remove()

    box.classList.remove('red','blackcolor')
    
  • 是否存在类 contains(‘red’) 返回布尔值true、false

    box.classList.contains('red')  // false
    
  • 切换类(有就删 无则加) toggle(‘xx’)

    box.classList.contains('heihei')  // 新增一个heihei类
    
  • 替换类 replace(‘被替换的’,‘替换进去的新类’)

    box.classList.replace('red','')  // red被除去 
    

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_997334.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【CSP试题回顾】201503-3-节日

CSP-201503-3-节日 关键点:格式化输出 在C中,格式化输出通常利用iostream库中的功能,特别是iomanip头文件提供的一系列操作符。这些操作符用于控制输出格式,如宽度、填充、对齐方式等。在你提供的代码中,用于格式化输…

电脑要用多少V的电源?电脑电源输入电压是市电

台式电源的输出电压是多少? 电脑电源输出一般有三种不同的电压,分别是: 12V、5V、3.3V。 电脑电源负责给电脑配件供电,如CPU、主板、内存条、硬盘、显卡等,是电脑的重要组成部分。 工作电流根据不同的硬件及其使用状…

Linux 开发工具 yum、git、gdb

目录 一、yum 1、软件包 2、rzsz 3、注意事项 4、查看软件包 5、安装软件 6、卸载软件 二、git操作 1、克隆三板斧 2、第一次使用会出现以下情况: 未配置用户名和邮箱: push后弹出提示 三、gdb使用 1、背景 2、使用方法 例一&#xff1a…

根据标准化开发流程---解析LIN总线脉冲唤醒的测试方法和用例设计思路

前言:本文从标准化开发流程的角度,以LIN总线脉冲唤醒为切入点。从测试工程师的角度来讲测试工作应当如何展开(结合我干测试总结出来的测试经验)。希望大家都能从中有收获!!谢谢!! 1…

设计模式(十三)抽象工厂模式

请直接看原文:设计模式(十三)抽象工厂模式_抽象工厂模式告诉我们,要针对接口而不是实现进行设计。( )-CSDN博客 -------------------------------------------------------------------------------------------------------------------------------- …

Android 消息恢复 - 如何在 Android 上检索已删除的短信

最新调查显示,手机每天发送和接收的短信数以亿计,尤其是Android智能手机。但与此同时,Android消息丢失也每天都在发生。因此,如何恢复Android手机上已删除的短信对于那些在设备中保存了一些重要信息的人来说似乎非常重要。 在这里…

鸿蒙Harmony应用开发—ArkTS声明式开发(基础手势:PanGesture)

拖动手势事件,当滑动的最小距离超过设定的最小值时触发拖动手势事件。 说明: 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 接口 PanGesture(value?: { fingers?: number; direction?: PanDir…

js--DOM树简介

DOM树将HTML文档以树状结构直管段表现出来,也称为节点树。 1、节点Node 节点是DOM树中的单个点,包括文档本身、元素、文本以及注释都属于是节点。 元素节点:所有的标签,html是根节点 属性节点:所有的属性 文本节点&…

基于springboot+vue的医疗挂号管理系统

博主主页:猫头鹰源码 博主简介:Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战,欢迎高校老师\讲师\同行交流合作 ​主要内容:毕业设计(Javaweb项目|小程序|Pyt…

1 数据分析概述与职业操守 (3%)

1、 EDIT数字化模型 E——exploration探索 (是什么) 业务运行探索:探索关注企业各项业务的运行状态、各项指标是否合规以及各项业务的具体数据情况等。 D——diagnosis 诊断 (为什么) 问题根源诊断:当业务指标偏离正常值时&…

Git保姆级使用教程

一、版本控制 1.1 团队开发问题 企业项目一般以团队形式实施开发,那团队开发中会出现哪些问题呢? 小明负责的模块就要完成了,就在即将Release之前的一瞬间,电脑突然蓝屏,硬盘光荣牺牲!几个月来的努力付之…

学习统一的Hyper - network用于多模态MR图像合成和缺失模态的肿瘤分割

Learning Unified Hyper-Network for Multi-Modal MR Image Synthesis and Tumor Segmentation With Missing Modalities Learning Unified Hyper-Network for Multi-Modal MR Image Synthesis and Tumor Segmentation With Missing Modalities背景贡献实验方法多模态合成方法超…

Go的安装

一. 下载地址 Go官方下载地址:https://golang.org/dl/ Go中文网:https://go.p2hp.com/go.dev/dl/ 根据不同系统下载不同的包。 二. 配置GOPATH GOPATH是一个环境变量,用来表明你写的go项目的存放路径。 GOPATH路径最好只设置一个&#xff0…

Linux系统:内核参数调优

目录 1、/proc目录 2、sysctl命令 3.1 控制源路由验证 3.2 控制内核的系统请求调试功能 3.3 控制核心转储是否将PID附加到核心文件名 3.4 控制TCP同步cookie的使用 3.5 在网桥上禁用netfilter 3.6 控制消息队列的默认最大大小 3.7 调试TCP内核参数 3.8 调试套…

Docker之若依项目部署

目录 一、搭建项目的局域网 1.1搭建局域网 1.2查看局域网 1.3注意:要关闭防火墙,关闭后要重启docker 二、redis安装 2.1创建目录 2.2修改redis.conf文件 三、MySQL安装 3.1安装 3.2设置远程连接 3.3创建数据库 四、若依后端项目搭建 4.1创建…

学习经验分享【NO.21】近期中文核心期刊目标检测论文理解

前言:最近比较忙,很久没有翻看知网论文了,看了下yolo改进相关的论文发现基于YOLOv5改进的核心期刊论文还是层出不穷,并没有因为已经是2024年了YOLOv9的出现而导致论文不好发,同时YOLOv8的论文也出了不少,所…

11 OpenCV 上采样与降采样,高斯不同(DOG)

文章目录 算子什么是高斯不同示例 算子 pyrUp(Mat src, Mat dst, Size(src.cols*2, src.rows*2)) 生成的图像是原图在宽与高各放大两倍 pyrDown(Mat src, Mat dst, Size(src.cols/2, src.rows/2)) 生成的图像是原图在宽与高各缩小1/2什么是高斯不同 定义:就是把同…

安卓使用ExoPlayer出现膨胀类异常

1.导包 implementation com.google.android.exoplayer:exoplayer-core:2.15.1implementation com.google.android.exoplayer:exoplayer-ui:2.15.1 2.在Androidifest.xml加入权限&#xff0c;我这里加了网络与读写权限 <uses-permission android:name"android.permissio…

【C语言】终の指针(前篇)

个人主页点这里~ 指针初阶点这里~ 指针初阶2.0点这里~ 指针进阶点这里~ 终の指针 一、回调函数二、qsort函数1、整形比较2、结构数据比较①结构体②-> 的使用③结构数据比较 一、回调函数 回调函数就是⼀个通过函数指针调用的函数。 把一个函数的指针作为参数传递给另一…

仓储管理系统(WMS) 的研发历程-PRD撰写

题外话&#xff1a;PRD的展现形式有多种&#xff0c;有的人喜欢在axure上直接做产品描述&#xff0c;觉得word较为过时&#xff0c;有的人认为axure不专业&#xff0c;任何展现形式都无可厚非&#xff0c;重要的达到PRD的目的&#xff0c;PRD的目标是让团队知道需求实现细节&am…