纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

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

快乐编程   2021-11-25 我要评论
想了解JavaScript利用html5新方法操作元素类名详解的相关内容吗,快乐编程在本文为您仔细讲解JavaScript用html5新方法操作元素类名的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:JavaScript用html5操作元素类名,html5新方法,html5方法操作元素类名,JavaScript,下面大家一起来学习吧。

早先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属性类型:

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>

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


相关文章

猜您喜欢

  • Nginx配置https Nginx配置https的实现

    想了解Nginx配置https的实现的相关内容吗,tang_jian_dong在本文为您仔细讲解Nginx配置https的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:Nginx 配置 https,下面大家一起来学习吧。..
  • vue 使用vue-cropper裁剪图片 vue怎样使用vue-cropper裁剪图片你知道吗

    想了解vue怎样使用vue-cropper裁剪图片你知道吗的相关内容吗,*且听风吟在本文为您仔细讲解vue使用vue-cropper裁剪图片的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vue裁剪图片,vuecropper裁剪图片,下面大家一起来学习吧。..

网友评论

Copyright 2020 www.mwhsoft.com 【绿色软件站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式