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

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. There is no Action mapped for namespace / and action name .解答

    做struts2登陆检验的时候遇到了一个问题: 输入http://localhost/login_validation/的目的是想显示 文件夹下的文件列表,无奈,使用struts框架,web.xml设 ...

  2. 初步接触ES6

    Babel---ES6转码器 ES6 声明变量的六种方法 ES5 只有两种声明变量的方法:var命令和function命令. ES6除了添加let和const命令,另外两种声明变量的方法:import ...

  3. 蚂蚁金服 Service Mesh 渐进式迁移方案|Service Mesh Meetup 实录

    小蚂蚁说: 本文是基于在 Service Mesher Meetup 上海站的主题分享<蚂蚁金服 Service Mesh 渐进式迁移方案>内容整理,完整的分享 PPT 获取方式见文章底部 ...

  4. Ubuntu 下 Python自由切换

    sudo update-alternatives --install /usr/bin/python python /usr/bin/python2 100 sudo update-alternati ...

  5. IPC 之 AIDL 的使用

    一.AIDL 知识储备 1. AIDL 文件支持的数据类型: 基本数据类型 (int , long , char , boolean ,double 等): String 和 CharSequence ...

  6. cocos2dx 编译遇到资源里有.svn文件不能删除报错的问题

    使用cocos compile -p android 对项目进行编译的时候,遇到res文件中包含了只读属性的svn目录,不能进行删除而报错. 错误如下图(build_android.py里面对.svn ...

  7. Codeforces 600 E - Lomsat gelral

    E - Lomsat gelral 思路1: 树上启发式合并 代码: #include<bits/stdc++.h> using namespace std; #define fi fir ...

  8. vue2.0 axios交互

    vue使用axios交互时候会出现的问题大致有三个: 1:本地调试跨域问题? 2:post请求,传参不成功,导致请求失败? 3:axios引用,在使用的组件里面引用 解决方案: 问题一:跨域? 解决本 ...

  9. 全栈性能测试修炼宝典--Jmeter实战（一）

    性能测试方向职业发展 1.软件测试发展路线 我们可以暂且把软件测试职业路线分为3个方向,分别是业务路线.技术路线.管理路线:4个象限,分别为执行层.中层.中高层过渡.高层. (1)业务路线 常见业务路 ...

  10. p1470 Longest Prefix

    原本就想到dp,可是是我的思路是在串的各个位置都遍历一次set,看dp[i-st[k]]是否为1且前length(st[k])是st[k].这样200000*200*10会超时.更好的办法是在i位取前 ...