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

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. PHPsession工作机制以及销毁session

  2. 【Ruby】【变量】

    知识点[Ruby 中$开头的全局变量.内部变量.隐藏变量介绍] Ruby 中充满了一系列的隐藏变量,我们可以从这些预定义的全局变量中获取一些有意思的信息. 全局进程变量 $$ 表示当前运行的 ruby ...

  3. RN中关于IOS和Android的相关权限的问题

    在日常的开发中,时常需要去获取应用的一权限 比如查看通讯录/打开摄像机等 1:ios  iOS 的权限管理在info.plist里设置 info.plist主要是管理了app 的一些信息文件,比如版本 ...

  4. Codeforces Round #424 (Div. 2, rated, based on VK Cup Finals) D. Office Keys time limit per test2 seconds 二分

    D. Office Keys time limit per test 2 seconds memory limit per test 256 megabytes input standard inpu ...

  5. python调用虹软2.0

    第一版踩了无数的坑,终于第二版把坑全添了,这次更新可以正常获取人脸数,角度,代码可读性更高,继续更新中 第三版已发出 https://www.cnblogs.com/wxt51/p/10125460. ...

  6. ArcFace2 #C 视频人脸比对教程

    请允许我大言不惭,叫做教程,特希望各位能指正.哦,我用的是vs2017.使用虹软技术 一.准备工作1.创建项目 2.添加EMGU.CV包 3.复制虹软的dll到项目 ,并设属性“复制到输出目录”为“如 ...

  7. Java 动态图片压缩

    今天收到领导的一个任务,说是图片太大导致服务器那边无法解析,要求图片大小大于102*126就压缩大小为102*126.同时文件是以Base64字符串的形式传过来的.具体压缩方法如下: /** * 图片 ...

  8. （转）C# 的三种序列化方法

    序列化是将一个对象转换成字节流以达到将其长期保存在内存.数据库或文件中的处理过程.它的主要目的是保存对象的状态以便以后需要的时候使用.与其相反的过程叫做反序列化. 序列化一个对象 为了序列化一个对象, ...

  9. spring cloud: Hystrix（七）：Hystrix的断容器监控dashboard

    Hystrix的断容器监控dashboard. dashboard是用来监控Hystrix的断容器监控的,图形化dashboard是如何实现指标的收集展示的. dashboard 本地端口8730 项 ...

  10. Nr,GenBank, RefSeq, UniProt 数据库的异同

    Nr,GenBank, RefSeq, UniProt 数据库的异同 有的文章在做DEG分析时,会把reads比对到RefSeq的转录组上.我也没搞清楚这和直接比对到常规转录组上有什么区别. 文章:S ...