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

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. 一个 xxx is not defined 引发的爬坑之路

    出处 https://www.cnblogs.com/daysme/ - 2018-01-06 昨晚找了一个代码解决了我对配置的需求.高兴的拿到手机上测试却发现点击没有效果,电脑上是可以的呀,电脑上的 ...

  2. 什么是java OOM？如何分析及解决oom问题？

    最近查找了很多关于OOM,甚至于Java内存管理以及JVM的相关资料,发现这方面的东西太多了,竟有一种眼花缭乱的感觉,要想了解全面的话,恐非一篇文章能说清的,因此按照自己的理解整理了一篇,剩下的还需要 ...

  3. webservice跨域问题

    在webconfig里面加上   <httpProtocol>      <customHeaders>        <add name="Access-Co ...

  4. 【一】jquery之subline编辑器插件安装

    1.地址下载:https://pan.baidu.com/share/link?shareid=552312&uk=151954025 2.打开Sublime, 选择 Prefreences  ...

  5. Cordova插件：InAppBrowser

    版权声明:本文为博主原创文章,转载请注明出处 一.应用场景 我们在做cordova app开发的时候,可能会经常遇到这种需求.比如在你的app中,你想打开一个URL,但是又不想跳转到系统的浏览器去打开 ...

  6. Xcode打包上传遇到的坑

    1.安装测试包的时候提示APIInternalError ①是否增加了测试设备的UUID ②是否使用adhoc证书打包 2.打包错误:error: couldn't remove '/Users/xx ...

  7. 第 6 章 存储 - 040 - docker managed volume

    docker managed volume 与 bind mount 在最大区别是不需要指定 mount 源,指明 mount point 就行了 通过 -v 告诉 docker 需要一个 data ...

  8. android 趟坑记

    又是一个伤感的故事,但阿古好像已经习以为常了. 大半年的辛苦又泡汤了,故事是这样. 帝都某高端小区,封闭局域网,做一个可视对讲+门禁的APP,之前那一版因为使用了商业代码,又不想花钱,于是找阿古换一个 ...

  9. php oracle数据库NCOLB字段ORA-01704

    php oracle数据库NCOLB字段ORA-01704 对clob更新  ORA-01704: 字符串文字太长 解决办法:把字符赋值给一个变量,然后赋值update语句 declarev_clob ...

  10. 2017.6.5项目总结(移动端touch事件)

    event.stopPropagation()  该方法将停止事件的传播,阻止它被分派到其他Document节点.在时间传播的任何阶段都可以调用它,注意,虽然该方法不能阻止同一个Document节点上 ...