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 CSS画图之基础篇
Jul 29 Javascript
JSQL 批量图片切换的实现代码
May 05 Javascript
自写的一个jQuery圆角插件
Oct 26 Javascript
js实现双向链表互联网机顶盒实战应用实现
Oct 28 Javascript
JQuery结合CSS操作打印样式的方法
Dec 24 Javascript
JS图像无缝滚动脚本非常好用
Feb 10 Javascript
JS实现清除指定cookies的方法
Sep 20 Javascript
基于JS+Canves实现点击按钮水波纹效果
Sep 15 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
Dec 06 Javascript
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
基于jquery的on和click的区别详解
Jan 15 jQuery
JS常用跨域方法实现原理解析
Dec 09 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 引用文件技巧
2010/03/02 PHP
php压缩和解压缩字符串的方法
2015/03/14 PHP
Mozilla 表达式 __noSuchMethod__
2009/04/05 Javascript
Jquery命名冲突解决的五种方案分享
2012/03/16 Javascript
js获取单选框或复选框值及操作
2012/12/18 Javascript
JavaScript prototype 使用介绍
2013/08/29 Javascript
js调试系列 断点与动态调试[基础篇]
2014/06/18 Javascript
nodejs 整合kindEditor实现图片上传
2015/02/03 NodeJs
JS实现获取键盘按下的按键并显示在页面上的方法
2015/11/04 Javascript
基于jquery步骤进度条源码分享
2015/11/12 Javascript
ES2015 Symbol 一种绝不重复的值
2016/12/25 Javascript
详解webpack + react + react-router 如何实现懒加载
2017/11/20 Javascript
React key值的作用和使用详解
2018/08/23 Javascript
Python采用Django开发自己的博客系统
2020/09/29 Python
理解Python中的绝对路径和相对路径
2017/08/30 Python
浅谈python正则的常用方法 覆盖范围70%以上
2018/03/14 Python
python 对类的成员函数开启线程的方法
2019/01/22 Python
VSCode Python开发环境配置的详细步骤
2019/02/22 Python
选择python进行数据分析的理由和优势
2019/06/25 Python
详解Django模版中加载静态文件配置方法
2019/07/21 Python
python爬虫 urllib模块发起post请求过程解析
2019/08/20 Python
Linux下通过python获取本机ip方法示例
2019/09/06 Python
python调用函数、类和文件操作简单实例总结
2019/11/29 Python
全网最全python库selenium自动化使用详细教程
2021/01/12 Python
澳大利亚最大的网上油画销售画廊:Direct Art Australia
2018/04/15 全球购物
ProBikeKit德国:在线公路自行车专家
2018/06/03 全球购物
英国皇家造币厂:The Royal Mint
2018/10/05 全球购物
存储过程的优缺点是什么
2015/01/10 面试题
如何用Java实现列出某个目录下的所有子目录
2015/07/20 面试题
总经理办公室主任岗位职责
2013/11/12 职场文书
2014高考励志标语
2014/06/05 职场文书
2014年度安全生产目标管理责任书
2014/07/25 职场文书
公务员上班玩游戏检讨书
2014/09/17 职场文书
优秀团员个人总结
2015/02/26 职场文书
2014年底个人工作总结
2015/03/10 职场文书
浅析Python中的套接字编程
2021/06/22 Python