首页 > 编程语言 >【javascript 编程】Web前端之JavaScript动态添加类名的两种方法、区别、className、classList

【javascript 编程】Web前端之JavaScript动态添加类名的两种方法、区别、className、classList

时间:2024-10-09 15:00:43浏览次数:10  
标签:Web el classList JavaScript className 添加 移除 类名

通过className来添加或删除类名

添加类名
获取元素el.className = "类名1 类名2 ...";多个类名用空格隔开。

移除类名
获取元素名el.className = " ";直接等于一个空字符串即可删除类名。

通过classList来添加或删除类名

添加一个类名
获取元素名el.classList.add("类名");。

添加多个类名用逗号隔开
获取元素名el.classList.add("类名1", "类名2", "类名3", ...);每个类名需要用引号引起来。

移除一个类名
获取元素名el.classList.remove("类名");。

移除多个类名
获取元素名el.classList.remove("类名1", "类名2", "类名3", ...);每个类名需要用引号引起来。

className与classList的区别

简介
className和classList是操作HTML元素类名的两种不同方法。

className
概述
className是一个字符串属性,表示元素的所有类名。

添加类名
方法:el.className = "类名1 类名2 ...";。
效果:直接设置元素的class属性为指定的类名字符串。这会替换掉元素上原有的所有类名。
示例:如果一个元素原来有类名"oldClass",使用el.className = "newClass1 newClass2";后,类名将变为"newClass1 newClass2",而不再包含"oldClass"。

移除类名
方法:el.className = "";。
效果:直接将className置为空字符串,从而移除所有类名。

优点
简单直接,适合需要重置或完全替换类名的场景。
兼容性好,几乎所有浏览器都支持。

缺点
无法单独添加或移除某个类名,只能通过重新设置整个className来完成操作。
操作不够灵活,容易误删原有类名。

classList
概述
classList是一个DOMTokenList对象,提供了对元素类名的操作方法。

添加类名
方法:el.classList.add("类名");。
效果:在元素的现有类名基础上添加一个新的类名,不会影响已有的类名。

移除类名
方法:el.classList.remove("类名");。
效果:从元素的现有类名中移除指定的类名,不会影响其他类名。

批量添加或移除类
方法:el.classList.add("类名1", "类名2", "类名3", ...); 和el.classList.remove("类名1", "类名2", "类名3", ...);。
效果:可以一次性添加或移除多个类名,操作简洁方便。

优点
操作更为灵活,可以单独添加或移除类名,不会影响其他类名。
提供了更多的操作方法,比如toggle()、contains()等,可以实现更多复杂的类名操作。
语义清晰,代码可读性好。

缺点
兼容性较className稍差,但现代浏览器基本都已支持。

总结
className适合简单且需要完全替换类名的场景,但在操作多个类名时不够灵活。
classList则更适合复杂场景,尤其是需要频繁增删类名时,它的灵活性和可读性更强。

效果图

案例

html


<input type="text" value="手机" />

style

input {
    outline: none;
    height: 35px;
    line-height: 35px;
    border: 1px solid #ccc;
    color: #999;
    text-indent: 1rem;
    display: inline-block;
    transition: all .3s;
}

.active {
    border: 1px solid skyblue;
    color: #333;
}

.active2 {
    box-shadow: 0 0 3px 2px pink;
}

JavaScript

window.onload = function () {
    document.querySelector('input').onfocus = function () {
        this.value = "";
        // 方法一:
        // this.style.color = "#333";
        // this.style.border = "1px solid skyblue";

        // 方法二:
        this.classList.add("active", "active2");

        // 方法三:
        // this.className = "active active2";
    }
    // trim() 去除空格
    document.querySelector('input').onblur = function () {
        if (this.value.trim() === "") {
            this.value = "手机";
            // 方法一:
            // this.style.color = "#999";
            // this.style.border = "1px solid #ccc";

            // 方法二:
            this.classList.remove("active", "active2");

            // 方法三:
            // this.className = "";
        }
    }
}

参考

标签:Web,el,classList,JavaScript,className,添加,移除,类名
From: https://www.cnblogs.com/o-O-oO/p/18384533

相关文章

  • [Javascript] Using Proxy to observe the object
    constobj={a:1,b:2,c:{d:1,e:2,},};functionisObject(val){returnval!==null&&typeofval==="object";}functionobserve(obj){constproxy=newProxy(obj,{get(target,key){constv......
  • 离线汉化stable-diffusion-webui界面
    1.从Stable-diffusion-webui的汉化扩展下载汉化语言包.2.进入下载好的文件夹,把"localizations"文件夹内的"chinese-and-english-0313.json"和"chinese-only-0313.json"复制到"stable-diffusion-webui\localizations"目录下.3 点击"Settings",左侧点击"U......
  • 创建空webapi服务
     1.打开vs2019,选择创建新项目2.选择ASP.NETWeb应用程序(.NETFramework) 3.配置项目信息(名称,位置,框架)4.选择空模板(WebAPI复选框选中)5.这样里面就没有MVC的三层,因为前后端分离,webapi中只有两层。6.空的WebApi程序创建完成。 ......
  • 【开题报告】基于django+vue基于web的房屋租赁系统(论文+源码) 计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容研究背景随着互联网技术的飞速发展,人们的生活方式发生了深刻变革,特别是在房地产租赁领域,传统的线下租赁模式已难以满足现代人对便捷、高效、透明服......
  • PatriotCTF2024 Web Impersonate
    源码:#!/usr/bin/envpython3fromflaskimportFlask,request,render_template,jsonify,abort,redirect,sessionimportuuidimportosfromdatetimeimportdatetime,timedeltaimporthashlibapp=Flask(__name__)server_start_time=datetime.now()server_s......
  • springboot+vue基于WEB的在线阅读系统【开题+程序+论文】
    系统程序文件列表开题报告内容研究背景随着互联网技术的飞速发展,数字化阅读已成为现代人获取信息、学习知识和休闲娱乐的重要方式。传统的纸质书籍阅读方式虽然具有其独特的魅力,但在便捷性、即时性和资源共享性方面已难以满足现代人的需求。因此,开发一个基于WEB的在线阅读......
  • 从混乱到整洁:JavaScript学习中的代码演变之旅
    学习中的代码演变在JavaScript的学习之旅中,初学者常产出略显混乱的代码,这实属正常。每个错误与不易理解的代码段都是成长的一部分,随着时间推移,你将逐渐掌握编写整洁代码的技巧。混乱中的创新追求完美并非初学者的首要任务,这样反而能激发你尝试多样化的解决方案。比如,在构建待办......
  • javascript学习——CSS 操作总结
    CSS操作CSS与JavaScript是两个有着明确分工的领域,前者负责页面的视觉效果,后者负责与用户的行为互动。但是,它们毕竟同属网页开发的前端,因此不可避免有着交叉和互相配合。本章介绍如何通过JavaScript操作CSS。HTML元素的style属性操作CSS样式最简单的方法,就是......
  • javascript学习——DOM 概述
    DOM概述DOMDOM是JavaScript操作网页的接口,全称为“文档对象模型”(DocumentObjectModel)。它的作用是将网页转为一个JavaScript对象,从而可以用脚本进行各种操作(比如增删内容)。浏览器会根据DOM模型,将结构化文档(比如HTML和XML)解析成一系列的节点,再由这些节点组......
  • Auto-Animate:是一款零配置、即插即用的动画工具,可以为您的 Web 应用添加流畅的过渡效
    嗨,大家好,我是小华同学,关注我们获得“最新、最全、最优质”开源项目和高效工作学习方法用户体验成为了检验产品成功与否的关键因素。而动画效果,作为提升用户体验的重要手段,在网页和应用开发中扮演着举足轻重的角色。今天,就让我们一起来探索一款名为Auto-Animate的动画工具,它......