首页 > 其他分享 >js CSS 类扩展

js CSS 类扩展

时间:2024-01-24 17:03:39浏览次数:27  
标签:删除 classList 元素 扩展 value js CSS div 类名

自 HTML4 被广泛采用以来,Web 开发中一个主要的变化是 class 属性用得越来越多,其用处是为 元素添加样式以及语义信息。自然地,JavaScript 与 CSS 类的交互就增多了,包括动态修改类名,以及 根据给定的一个或一组类名查询元素,等等。为了适应开发者和他们对 class 属性的认可,HTML5 增 加了一些特性以方便使用 CSS 类。

1. getElementsByClassName()

getElementsByClassName()是 HTML5 新增的最受欢迎的一个方法,暴露在 document 对象和 所有 HTML 元素上。 这个方法脱胎于基于原有 DOM 特性实现该功能的 JavaScript 库,提供了性能高好 的原生实现。 getElementsByClassName()方法接收一个参数,即包含一个或多个类名的字符串,返回类名中 包含相应类的元素的 NodeList。如果提供了多个类名,则顺序无关紧要。下面是几个示例:

// 取得所有类名中包含"username"和"current"元素
// 这两个类名的顺序无关紧要
let allCurrentUsernames = document.getElementsByClassName("username current");
// 取得 ID 为"myDiv"的元素子树中所有包含"selected"类的元素
let selected = document.getElementById("myDiv").getElementsByClassName("selected");

这个方法只会返回以调用它的对象为根元素的子树中所有匹配的元素。在 document 上调用 getElementsByClassName()返回文档中所有匹配的元素,而在特定元素上调用 getElementsBy- ClassName()则返回该元素后代中匹配的元素。 如果要给包含特定类(而不是特定 ID 或标签)的元素添加事件处理程序,使用这个方法会很方便。 不过要记住,因为返回值是 NodeList,所以使用这个方法会遇到跟使用 getElementsByTagName() 注意 因为 HTML5 覆盖的范围极其广泛,所以本节主要讨论其影响所有 DOM 节点的部 分。

和其他返回 NodeList 对象的 DOM 方法同样的问题。 IE9 及以上版本,以及所有现代浏览器都支持 getElementsByClassName()方法。

2. classList 属性

<div class="bd user disabled">...</div> 17

这个

元素有 3 个类名。要想删除其中一个,就得先把 className 拆开,删除不想要的那个, 再把包含剩余类的字符串设置回去。比如: 要操作类名,可以通过 className 属性实现添加、删除和替换。但 className 是一个字符串, 所以每次操作之后都需要重新设置这个值才能生效,即使只改动了部分字符串也一样。以下面的 HTML 代码为例:

let classNames = div.className.split(/\s+/); 19
// 要删除"user"类
let targetClass = "user";
 // 把类名拆成数组
// 找到要删除类名的索引
let idx = classNames.indexOf(targetClass);
// 如果有则删除 if (idx > -1) {
  classNames.splice(i,1);
}
// 重新设置类名
div.className = classNames.join(" ");

这就是从

元素的类名中删除"user"类要写的代码。替换类名和检测类名也要涉及同样的算 法。添加类名只涉及字符串拼接,但必须先检查一下以确保不会重复添加相同的类名。很多 JavaScript 库为这些操作实现了便利方法。 HTML5 通过给所有元素增加 classList 属性为这些操作提供了更简单也更安全的实现方式。 classList 是一个新的集合类型 DOMTokenList 的实例。与其他 DOM 集合类型一样,DOMTokenList 也有 length 属性表示自己包含多少项,也可以通过 item()或中括号取得个别的元素。此外, DOMTokenList 还增加了以下方法。 24  add(value),向类名列表中添加指定的字符串值 value。如果这个值已经存在,则什么也不做。  contains(value),返回布尔值,表示给定的 value 是否存在。  remove(value),从类名列表中删除指定的字符串值 value。  toggle(value),如果类名列表中已经存在指定的 value,则删除;如果不存在,则添加。 这样以来,前面的例子中那么多行代码就可以简化成下面的一行: div.classList.remove("user"); 这行代码可以在不影响其他类名的情况下完成删除。其他方法同样极大地简化了操作类名的复杂 性,如下面的例子所示:

// 删除"disabled"类 div.classList.remove("disabled");
// 添加"current"类 div.classList.add("current");
div.classList.toggle("user");
// 检测类名
if (div.classList.contains("bd") && !div.classList.contains("disabled")){
// 执行操作 )
// 迭代类名
for (let class of div.classList){
      doStuff(class);
    }

添加了 classList 属性之后,除非是完全删除或完全重写元素的 class 属性,否则 className 属性就用不到了。IE10 及以上版本(部分)和其他主流浏览器(完全)实现了 classList 属性。

标签:删除,classList,元素,扩展,value,js,CSS,div,类名
From: https://blog.51cto.com/u_16273048/9400083

相关文章

  • js matches()
    matches()方法(在规范草案中称为matchesSelector())接收一个CSS选择符参数,如果元素匹配则该选择符返回true,否则返回false。例如:if(document.body.matches("body.page1")){//true}使用这个方法可以方便地检测某个元素会不会被querySelector()或querySelectorAll()方......
  • js DOM 扩展
    尽管DOMAPI已经相当不错,但仍然不断有标准或专有的扩展出现,以支持更多功能。2008年以前,大部分浏览器对DOM的扩展是专有的。此后,W3C开始着手将这些已成为事实标准的专有扩展编制成正式规范。本章所有内容已经得到市场占有率名列前茅的所有主流浏览器支持,除非特别说明。Java......
  • 无涯教程-CSS3 - 字体属性(Font)
    Web字体用于允许CSS中的字体,这些字体未在本地系统上安装。Sr.No.Font&Remark1TrueTypeFonts(TTF)TrueType是Apple和Microsoft在1980年代后期开发的轮廓字体标准,它成为Windows和MAC操作系统最常用的字体。2OpenTypeFonts(OTF)OpenType是Microsoft开发的可缩放计......
  • python创建json文件并换行
     在Python中,您可以使用内置的json 模块创建和操作JSON文件。以下是如何创建一个JSON文件的步骤:1、Json格式JSON数据的书写格式是键(名称)/值对。JSON值可以是:字符串(在双引号中)、数组(在中括号中)、数字(整数或浮点数)、逻辑值(true或false)、对象(在大括号中)、null。JSON......
  • [转]JavaScript:解决计算精度问题/mathjs/bignumber.js/big.js/decimal.js
    原文地址:JavaScript:解决计算精度问题/mathjs/bignumber.js/big.js/decimal.js_js计算精度问题-CSDN博客一、计算精度现象举例举例1、加法 举例2、减法 举例3、乘法 举例3、除法 二、JS为什么会有计算精度的问题JavaScript内部只有一种数字类型Number,也就是说,Java......
  • JS逆向实战27——pdd的anti_content 分析与逆向
    声明本文章中所有内容仅供学习交流,抓包内容、敏感网址、数据接口均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后果均与作者无关,若有侵权,请联系我立即删除!本文已在微信公众号发布目标网站aHR0cHM6Ly9tb2JpbGUucGluZHVvZHVvLmNvbS8=任务获取商品列表接口......
  • Java Chassis 3技术解密:易扩展的多种注册中心支持
    原文链接:https://bbs.huaweicloud.com/blogs/420748JavaChassis的早期版本依赖于ServiceCenter,提供了很多差异化的竞争力:接口级别转发。通过注册中心管理微服务的每个版本的元数据,特别是契约数据。结合契约数据,能够实现版本级别的路由能力。比如一个微服务存在v1和v2两......
  • 无涯教程-CSS3 - 渐变属性(Gradients)
    渐变显示两种或更多种颜色的组合,如下所示-线性渐变线性渐变用于以线性格式(如从上到下)排列两种或多种颜色。Toptobottom(从上到下)<html><head><style>#grad1{height:100px;background:-webkit-linear-gradient(pink,......
  • 在React中使用Bootstrap中的Modal并使用Js控制(非使用Bootstrap-React)
    在React中使用Bootstrap框架组件Render<buttonclassName='btnbtn-primarybtn-sm'onClick={()=>openModal()}>详细</button><divclassName="modalfade"id="info-modal"tabIndex={-1}aria-labelledby=""aria-h......
  • 无涯教程-CSS3 - 颜色属性(Color)
    CSS3支持以下其他颜色属性-RGBA颜色HSL颜色HSLA颜色Opacity透明RGBA代表RedGreenBlueAlpha。它是CSS2的扩展,Alpha指定颜色的透明度,参数是0.0到1.0之间的数字。RGBA的示例语法如下所示-#d1{background-color:rgba(255,0,0,0.5);}#d2{background-colo......