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

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. [UVA-11039]Children's Game

    解析 微扰法贪心经典题 代码 #include <bits/stdc++.h> using namespace std; bool cmp(const string &x, con ...

  2. 20165306 实验二 Java面向对象程序设计

    实验二 Java面向对象程序设计 实验要求 1.提交最后三个JUnit测试用例(正常情况,错误情况,边界情况)都通过的截图,截图上要有画图加水印,输入自己的学号.本提交点考查JUnit会不会使用,测试 ...

  3. 批处理数据库（利用batch插入2w条数据）

    public class Demo02Batch { /* * 批处理 */ public static void main(String[] args) { Connection conn=null ...

  4. VC_窗口exe_printf信息

    1. #include <io.h> #include <fcntl.h> #include <stdio.h> 2. void InitConsoleWindow ...

  5. Calendar的使用注意

    一.Calendar和GregorianCalendar的关系 GregorianCalendar的一点: // 初始化 Gregorian 日历 // 使用当前时间和日期 // 默认为本地时间和时区 ...

  6. css 可继承属性 display:inline-block 历史

    1. css 可继承属性 1.1 font font-family:规定元素的字体系列font-weight:设置字体的粗细font-size:设置字体的尺寸font-style:定义字体的风格fon ...

  7. Lua和C++交互 学习记录之五：全局数组交互

    主要内容转载自:子龙山人博客(强烈建议去子龙山人博客完全学习一遍) 部分内容查阅自:<Lua 5.3  参考手册>中文版 译者 云风 制作 Kavcc vs2013+lua-5.3.3 1 ...

  8. ZOJ 3965 Binary Tree Restoring

    Binary Tree Restoring 思路: 递归 比较a序列和b序列中表示同一个子树的一段区间,不断递归 代码: #include<bits/stdc++.h> using nam ...

  9. centos php5.4 升级 php7

    接上篇,edusoho需要php5.5以上版本,于是需要升级本地php php是通过yum默认安装的.以下安装参考 link https://blog.csdn.net/u012569217/arti ...

  10. springmvc如何进行热部署开发

    1.场景还原 在工程量大的情况下,tomcat运行部署一次会花费相当多的时间,这样太 浪费人力以及时间了:今天笔者将 讲解一下如何配置springmvc工程的热部署 2.实现方案 其实很简单! ①在t ...