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


Posted in Javascript onNovember 27, 2021

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

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

1、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>

控制台查看效果:

classList属性类型:

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

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

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

2、实务应用

实务中,栏目是切换是很常用的一个应用。接上面的例子,当点击栏目时 将 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>

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

到此这篇关于JavaScripthtml5新方法操作元素类名详解的文章就介绍到这了,更多相关JavaScripthtml5新方法操作元素类名内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
异步javascript的原理和实现技巧介绍
Nov 08 Javascript
onbeforeunload与onunload事件异同点总结
Jun 24 Javascript
一个JS的日期格式化算法示例
Jul 31 Javascript
javascript数据结构之双链表插入排序实例详解
Nov 25 Javascript
浅谈JavaScript中数组的增删改查
Jun 20 Javascript
AngularJs concepts详解及示例代码
Sep 01 Javascript
angular实现IM聊天图片发送实例
May 08 Javascript
jQuery为某个div加入行样式
Jun 09 jQuery
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
微信小程序HTTP接口请求封装的实现
Feb 21 Javascript
vue登录页面cookie的使用及页面跳转代码
Jul 10 Javascript
vue项目出现页面空白的解决方案
Oct 31 Javascript
一文了解JavaScript用Element Traversal新属性遍历子元素
Nov 27 #Javascript
JavaScript选择器函数querySelector和querySelectorAll
Nov 27 #Javascript
关于JavaScript 中 if包含逗号表达式
Nov 27 #Javascript
JavaScript中MutationObServer监听DOM元素详情
Nov 27 #Javascript
JavaScript中document.activeELement焦点元素介绍
Nov 27 #Javascript
利用JavaScript写一个简单计算器
JavaScript中的宏任务和微任务详情
Nov 27 #Javascript
You might like
php获取url字符串截取路径的文件名和扩展名的函数
2010/01/22 PHP
PHP中each与list用法分析
2016/01/08 PHP
php中引用&amp;的用法分析【变量引用,函数引用,对象引用】
2016/12/12 PHP
thinkphp框架page类与bootstrap分页(美化)
2017/06/25 PHP
php经典趣味算法实例代码
2020/01/21 PHP
asp批量修改记录的代码
2008/06/25 Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
2014/05/28 Javascript
js 操作符汇总
2014/11/08 Javascript
JQuery实现Ajax加载图片的方法
2015/12/24 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
2016/07/06 Javascript
浅谈html转义及防止javascript注入攻击的方法
2016/12/04 Javascript
js禁止表单重复提交
2017/08/29 Javascript
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
2018/08/22 Javascript
Vue对象赋值视图不更新问题及解决方法
2019/06/03 Javascript
详解vue为什么要求组件模板只能有一个根元素
2019/07/22 Javascript
flexible.js实现移动端rem适配方案
2020/04/07 Javascript
vue+iview实现文件上传
2020/11/17 Vue.js
对vue生命周期的深入理解
2020/12/03 Vue.js
vue项目中openlayers绘制行政区划
2020/12/24 Vue.js
[04:46]2018年度玩家喜爱的电竞媒体-完美盛典
2018/12/16 DOTA
python selenium 对浏览器标签页进行关闭和切换的方法
2018/05/21 Python
Python代码块批量添加Tab缩进的方法
2018/06/25 Python
Django学习之文件上传与下载
2019/10/06 Python
python 将视频 通过视频帧转换成时间实例
2020/04/23 Python
HTML5 本地存储之如果没有数据库究竟会怎样
2013/04/25 HTML / CSS
英国探险旅游专家:Explore
2018/12/20 全球购物
俄罗斯商务邀请函
2014/01/26 职场文书
高中自我评价范文
2014/01/27 职场文书
迎元旦广播稿
2014/02/22 职场文书
信息管理与信息系统专业求职信
2014/06/21 职场文书
领导班子四风问题个人对照检查材料
2014/10/04 职场文书
2014年网络管理员工作总结
2014/12/01 职场文书
超搞笑婚前保证书
2015/05/08 职场文书
培根随笔读书笔记
2015/07/01 职场文书
Ajax实现三级联动效果
2021/10/05 Javascript
mybatis 获取更新记录的id
2022/05/20 Java/Android