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

2024-10-20 10:42:15

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 类型，可以通过add、contains、remove等方法对类属性进行操作。

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>

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

到此这篇关于JavaScript用html5新方法操作元素类名详解的文章就介绍到这了,更多相关JavaScript用html5新方法操作元素类名内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

js+HTML5 canvas 实现简单的加载条(进度条)功能示例

本文实例讲述了js+HTML5 canvas 实现简单的加载条(进度条)功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>www.jb51.net canvas实现加载条动画</title> </head> <body> <canv
JavaScript+HTML5 canvas实现放大镜效果完整示例

本文实例讲述了JavaScript+HTML5 canvas实现放大镜效果.分享给大家供大家参考,具体如下: 效果: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>www.jb51.net canvas放大镜</title> <style> #copycanvas { border: 1px
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例

本文实例讲述了JS+HTML5本地存储Localstorage实现注册登录及验证功能.分享给大家供大家参考,具体如下: 源码引用的js.jquery都是在线的,代码拷到本地就能运行登录: <html ng-app="ionicApp"> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, m
JavaScript实现拖动滑块拼图验证功能（html5、canvas）

引言: 滑块拖动验证现在很多地方都用到,周末就琢磨着写了一个,放上来,看看有没有人用得上! 效果: 实现思路: 用一张画布绘制源图,再绘制一个填充的方形,这样就可以达到缺失的效果(方形的坐标是随机的): 再用一个画布绘制拖动块,同时用drawImage截取和上一步中方形区域一样坐标.大小的原图,就作为验证图了,把验证图放在最左边: 在拖动块处,按下鼠标然后拖动,拖动块和验证图会跟随鼠标移动,达到一定范围后放开鼠标,会进行验证: 验证通过则提示验证成功,验证不通过则拖动块和验证图会返回到最左边.
javascript+HTML5 canvas绘制时钟功能示例

本文实例讲述了javascript+HTML5 canvas绘制时钟功能.分享给大家供大家参考,具体如下: 效果如下: 代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>www.jb51.net canvas绘制时钟</title> <style> div{text-align:cent
JS+html5实现异步上传图片显示上传文件进度条功能示例

本文实例讲述了JS+html5实现异步上传图片显示上传文件进度条功能.分享给大家供大家参考,具体如下: <html> <head> </head> <body> <p> emo_album_id:<input type="text" name="emo_album_id" id="emo_album_id" value='1'> </p> <p> na
javascript实现移动端 HTML5 图片上传预览和压缩功能示例

本文实例讲述了javascript实现移动端 HTML5 图片上传预览和压缩功能.分享给大家供大家参考,具体如下: 在开发移动端web网页中,我们不可避免的会遇到文件上传的功能,但由于手机图片尺寸太大,上传时间过长导致用户体验太差,就需要在上传前对图片进行一定的压缩. 在代码之前,有必要先了解我们即将使用到的几个API file 和 FileList 对象 file对象可以用来获取某个文件的信息,还可以用来读取这个文件的内容.通常情况下,File对象是来自用户在一个 input 元素上选择文件后
JavaScript利用html5新方法操作元素类名详解

目录 1.classList属性 2.实务应用早先JavaScript处理起来特别不方便,需要先取到class属性,然后对字符串进行处理. 现在html5给所有元素增加了classList属性来操作类属性,非常方便. 1.classList属性先看如下代码: <ul class="nav"> <li class="active">栏目1</li> <li>栏目2</li> <li>栏目3&l
JavaScript如何动态监听DOM元素高度详解

背景考虑这样一种情况,产品同学希望达到以下功能: 在我们的网页中有一个固定区域,这个区域会用于渲染从后端拉取的含有图片等资源的富文本字符串. 他需要在内容不超过一个最大高度的时候完全显示所有内容,超过最大内容后仅展示最大高度范围内的内容,超出部分隐藏,并通过一个按钮 “展示更多” 来给用户展示更多的选择. 在这看似简单的需求当中,其实涉及到了一个难点,那就是怎样动态的监听到内容区域的高度变化? 因为在这里面会含有图片资源,他们在渲染的时候会发起网络请求,等待图片加载完成后触发浏览器重排,该区域
JavaScript WebAPI、DOM、事件和操作元素实例详解

目录 WebAPI DOM DOM树 DOM获取元素方式 document对象属性事件事件的使用步骤事件的类型操作元素操作元素内容操作元素属性操作元素样式排他思想 H5自定义属性总结 WebAPI API:应用程序编程接口,是一些预先定义的函数,由某个软件开放给开发人员使用的,帮助开发者实现某种功能,开发人员无须访问源码.无须理解其内部工作机制细节,只需知道如何使用即可简单理解: API 是给程序员提供的一种工具,以便能更轻松的实现想要完成的功能 WebAPI:主要针对浏览器
Java使用wait() notify()方法操作共享资源详解

Java多个线程共享资源: 1)wait().notify()和notifyAll()方法是本地方法,并且为final方法,无法被重写. 2)调用某个对象的wait()方法能让当前线程阻塞,并且当前线程必须拥有此对象的monitor(即锁,或者叫管程) 3)调用某个对象的notify()方法能够唤醒一个正在等待这个对象的monitor的线程,如果有多个线程都在等待这个对象的monitor,则只能唤醒其中一个线程: 4)调用notifyAll()方法能够唤醒所有正在等待这个对象的monitor的线
JavaScript操作DOM对象详解

一.DOM基础 DOM(Document Object Model)即文档对象模型,针对HTML和XML文档的API(应用程序接口).DOM描绘了一个层次化的节点树,运行开发人员添加.移除和修改页面的某一部分.DOM中的三个字母,D(文档)可以理解为整个Web加载的网页文档:O(对象)可以理解为类似Window对象之类的东西,可以调用属性和方法,这里我们说的是document对象:M(模型)可以理解为网页文档的树型结构. 1.节点加载HTML页面时,Web浏览器生成一个树型结构,用来表示页面内
C++利用MySQL API连接和操作数据库实例详解

1.C++连接和操作MySQL的方式系列文章: MySQL 设计和命令行模式下建立详解 C++利用MySQL API连接和操作数据库实例详解在Windows平台,我们可以使用ADO.ODBC或者MySQL API进行连接和操作.ADO (ActiveX Data Objects,ActiveX数据对象)是Microsoft提出的一个用于存取数据源的COM组件.它提供了程序语言和统一数据访问方式OLE DB的一个中间层,也就是Microsoft提出的应用程序接口(API)用以实现访问关系或非关
JavaScript策略模式利用对象键值的映射关系详解

目录引言 1.策略模式的极简实现 2.策略模式的简单案例 (1)工具函数 (2)提示样式总结引言策略模式指的是,定义一系列的算法,把它们一个个的封装起来,通过传递一些参数,使他们可以相互替换. 举个周末从家去咖啡馆的例子: 从家去咖啡馆,有跑步.骑行和漫步的方式.也就是说,从家到咖啡馆,有三种策略可选择. 1.策略模式的极简实现通过对象的键值映射关系,定义策略和具体实现之间的关系: var strategies = { A: xxx, B: yyy, C: zzz } 其中,A.B和C
Python脚本Selenium及页面Web元素定位详解

目录 Selenium特点八种定位方式 1.driver.find_element_by_xpath(value) 2.driver.find_element_by_css_selector(value) 3.driver.find_element_by_id(value) 4.driver.find_element_by_name(value) 5.driver.find_element_by_class_name(value) 6.driver.find_element_by_tag_na
JavaScript中BOM,DOM和事件的用法详解

目录 BOM 概念对象组成 Window:窗口对象 Location:地址栏对象 History:历史记录对象 DOM 概念 W3C DOM 标准被分为 3 个不同的部分核心DOM模型 HTML DOM 事件监听机制概念常见的事件事件简单学习 BOM 概念 BOM全称Browser Object Model浏览器对象模型,将浏览器的各个组成部分封装成对象. 对象组成 Window:窗口对象 Navigator:浏览器对象 Screen:显示器屏幕对象 History:历史记录对象 Lo
Java8 新特性Lambda表达式实例详解

Java8 新特性Lambda表达式实例详解在介绍Lambda表达式之前,我们先来看只有单个方法的Interface(通常我们称之为回调接口): public interface OnClickListener { void onClick(View v); } 我们是这样使用它的: button.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { v.setText("

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

目录

1、classList属性

2、实务应用

相关推荐

随机推荐