直接撸代码 全靠死记硬背 没什么技术点

HTML部分

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>原生js实现对类的增加、删除、修改</title>

</head>

<body>

    <div id="test" class="old-class"></div>

</body>

</html>

JS部分 方案一（原生js）：

// 获取节点和节点的class属性值

var $test = document.getElementById("test");

var test_class_name = $test.getAttribute("class");

// 增加一个class

test_class_name = test_class_name.concat(" add-class");

$test.setAttribute("class",test_class_name );

// 删除一个class

test_class_name = test_class_name.replace("old-class","");

$test.setAttribute("class",test_class_name );

// 替换一个class

test_class_name = test_class_name.replace("old-class","new-class");

$test.setAttribute("class",test_class_name);

方案2 (H5新特性) ：

contains(value) 判断名为value的类名是否存在

add(value) 添加名为value的类名

remove(value) 删除名为value的类名

toggle(value) 如果名为value的类名存在则删除，不存在则添加

// 代码如下：

// 获取节点

var $test = document.getElementById("test");

// 增加一个class

$test.classList.add("new-class");

// 删除一个class

$test.classList.remove("old-class");

// toggle(value)方法，如果存在value这个类名就删除，如果不存在则添加

$test.classList.toggle("old-class");

// contains(value)方法，判断value这个类名是否存在，存在返回true，不存在返回false

$test.classList.contains("old-class");

// 通过先删除old-class,然后添加new-class的方式，变相的实现替换class的目的

$test.classList.remove("old-class");

$test.classList.add("new-class");

结语：以上就是今天要分享的了。

H5新特性实现对class的增删改的更多相关文章

  1. web项目总结——通过jsp+servlet实现对oracle的增删改查功能

    1.DAO模式 分包:依次建立 entity:实体包,放的是跟oracle数据库中表结构相对应的对象的属性,也就是这个对象有什么 dao:增删改查接口,实现增删改查的具体方法 service:同dao ...

  2. Android 利用xUtils框架实现对sqllite的增删改查

    首先下载xUtils,下载地址:https://github.com/wyouflf/xUtils  把下载好的文件压缩,把里面的jar包拷进项目中如图所示: 这里新建一个User类进行测试增删改查 ...

  3. Java实现对cookie的增删改查

    原文地址:http://blog.csdn.net/k21325/article/details/54377830 @RequestMapping(value="meeting/addGua ...

  4. 在Salesforce中实现对Object的增删改查操作

    1): Insert Statement    http://www.salesforce.com/us/developer/docs/apexcode/index_Left.htm#CSHID=ap ...

  5. Javaweb实现对mongodb的增删改查（附带源代码）

    运行截图: 删除后的信息 项目源代码:https://www.cnblogs.com/post/readauth?url=/zyt-bg/p/9807396.html

  6. 实现对sqlite数据库增删改查

    package com.example.db.dao;import java.util.ArrayList;import java.util.List;import android.content.C ...

  7. H5新特性汇总

    H5新特性: 新增选择器 document.querySelector.document.querySelectorAll 拖拽释放(Drag and drop) API 媒体播放的 video 和 ...

  8. H5新特性--WebStorage--WebSocke

    今天的目标 3.2:h5新特性--WebStorage localStorage  在客户端浏览器保存数据 永久保存 保存数据 localStorage [key] = value 保存数据 loca ...

  9. H5新特性---Web Worker---Web Stroage

    今天的目标 3.1:h5新特性八--Web Worker---代码就3行 程序:program 存储在外存(磁盘)中代码 进程:Process/Task 将程序调用内存中,分配空间 线程:Thread ...

随机推荐

  1. JAVA基础之复识二

    JAVA语言 未经本人允许禁止转载或使用 基础知识:JAVA数据类型,运算符,流程控制等 注释: // 单行注释 /* 多行连续注释 ... */ /** 文档注释,该类型的注释会生成一个html文件 ...

  2. mysql联合主键自增、主键最大长度小记

    前言 一. 联合主键自增问题 今天上午闲来无事翻看了下数据库分类表的设计,看到这样一幕: 当时我好奇的是怎么cateId自增会存在重复值的问题,然后翻看了下主键是由siteId和cateId组成.所以 ...

  3. MySQL字段拼接Concat

    有时候,从数据库中拿出的数据并不是我们想要的格式,比如,有以下的vendors表 如果,想以 name (location)的格式展现出来,那么就要用到MySQL的Concat了. Concat()拼 ...

  4. Object_C 与JavaScript交互使用总结

    iOS开发中oc与js交互的方式有很多,我们可以使用流行的第三方库如:WebviewJavaScriptBridge和OVGap,这两个库都是让webview与JS建立起一条桥梁,我们也可以使用iOS ...

  5. Android SDK开发

    目前我们的应用内使用了 ArcFace 的人脸检测功能,其他的我们并不了解,所以这里就和大家分享一下我们的集成过程和一些使用心得 集成 ArcFace FD 的集成过程非常简单 在 ArcFace F ...

  6. 一些angular/js/ts的坑和吐槽

    ------20190318 ------------- 回头看,很多槽点已经随着升级改掉了   绑定string字面值到子组件@Input <app-overlay-static [name] ...

  7. 大数据-Hive 常用命令

    Hive 启动 ~$ hive 退出 hive>quit; --退出hive or hive> exit; --exit会影响之前的使用,所以需要下一句kill掉hadoop的进程 > ...

  8. lua --- Module

    首先需要明白,一般情况下,我们的定义的lua模块的文件与模块名(其实就是table的名字)是一致的,当然,不一致代码也是可以编译的(亲测),之所以这样,本人认为是为了实际项目中管理的方便.以下是定义模 ...

  9. 主元素问题 Majority Element

    2018-09-23 13:25:40 主元素问题是一个非常经典的问题,一般来说,主元素问题指的是数组中元素个数大于一半的数字,显然这个问题可以通过遍历计数解决,时间复杂度为O(n),空间复杂度为O( ...

  10. Adobe Photoshop CC 2018 v19.0 简体中文正式版下载安装破解(附注册机+破解教程) 32/64位（安装破解注意事项是什么）

    Adobe Photoshop CC 2018 v19.0 简体中文正式版下载安装破解(附注册机+破解教程) 32/64位(安装破解注意事项是什么) 一.总结 一句话总结:下载安装破解教程文中都有,需 ...