JavaScript用html5新方法操作元素类名

晴空闲云
• 阅读 894

现在网页中类属性使用越来越多,经常会通过增加类、移除类给指定的元素修改样式效果。

早先JavaScript处理起来特别不方便,需要先取到class属性,然后对字符串进行处理。

现在html5给所有元素增加了classList属性来操作类属性,非常方便。

classList

先看如下代码:

<ul class="nav">
    <li class="active">栏目1</li>
    <li>栏目2</li>
    <li>栏目3</li>
</ul>

<script type="text/javascript">
    // 获取到当前的li元素
    let activeLi = document.querySelector(".active");
    // 打印classList属性
    console.log(activeLi.classList)
    // 控制台输出:
    //     DOMTokenList ['active', value: 'active']
</script>

控制台查看效果:

JavaScript用html5新方法操作元素类名

classList属性是 DOMTokenList 类型,可以通过add、contains、remove等方法对类属性进行操作。

add(value) 新增加一个类名。
contains(value) 是否包含类名。
remove(value) 删除类名。
toggle(value) 如果类名存在则删除,否则添加。

实务应用

实务中,栏目是切换是很常用的一个应用。接上面的例子,当点击栏目时 将 active 移动到对应的栏目。

<ul class="nav">
    <li class="item active">栏目1</li>
    <li class="item">栏目2</li>
    <li class="item">栏目3</li>
</ul>

<script type="text/javascript">
    let currentElement = document.querySelector(".nav").firstElementChild;
    // 遍历li元素设置点击事件
    while (currentElement) {
        currentElement.onclick = function() {
            // 移除激活li的active
            document.querySelector(".active").classList.remove("active");
            // 当前li类增加active
            this.classList.add("active");
        }
        currentElement = currentElement.nextElementSibling;
    }
</script>

这样实现起来就很方便了,不用影响到其他类名。

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Karen110 Karen110
3年前
一篇文章带你了解JavaScript日期
日期对象允许您使用日期(年、月、日、小时、分钟、秒和毫秒)。一、JavaScript的日期格式一个JavaScript日期可以写为一个字符串:ThuFeb02201909:59:51GMT0800(中国标准时间)或者是一个数字:1486000791164写数字的日期,指定的毫秒数自1970年1月1日00:00:00到现在。1\.显示日期使用
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
5个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Wesley13 Wesley13
3年前
java8新特性
Stream将List转换为Map,使用Collectors.toMap方法进行转换背景:User类,类中分别有id,name,age三个属性。List集合,userList,存储User对象1、指定keyvalue,value是对象中的某个属性值。 Map<Integer,StringuserMap1userList.str
Wesley13 Wesley13
3年前
Java日期时间API系列31
  时间戳是指格林威治时间1970年01月01日00时00分00秒起至现在的总毫秒数,是所有时间的基础,其他时间可以通过时间戳转换得到。Java中本来已经有相关获取时间戳的方法,Java8后增加新的类Instant等专用于处理时间戳问题。 1获取时间戳的方法和性能对比1.1获取时间戳方法Java8以前
Stella981 Stella981
3年前
Python之time模块的时间戳、时间字符串格式化与转换
Python处理时间和时间戳的内置模块就有time,和datetime两个,本文先说time模块。关于时间戳的几个概念时间戳,根据1970年1月1日00:00:00开始按秒计算的偏移量。时间元组(struct_time),包含9个元素。 time.struct_time(tm_y
Stella981 Stella981
3年前
CSS 分类 (Classification)
★★CSS分类属性(Classification)★★⑴CSS分类属性允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素,使用绝对值来定位元素,以及元素的可见度。⑵下面是常用的属性以及描述:!(https://oscimg.oschina.net/oscnet/00cb565
Python进阶者 Python进阶者
10个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
晴空闲云
晴空闲云
Lv1
男 · 软件工程师
专注计算机科学,阅读、思考、写作。
文章
26
粉丝
8
获赞
35