H5新特性实现对class的增删改
直接撸代码 全靠死记硬背 没什么技术点
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的增删改的更多相关文章
- web项目总结——通过jsp+servlet实现对oracle的增删改查功能
1.DAO模式 分包:依次建立 entity:实体包,放的是跟oracle数据库中表结构相对应的对象的属性,也就是这个对象有什么 dao:增删改查接口,实现增删改查的具体方法 service:同dao ...
- Android 利用xUtils框架实现对sqllite的增删改查
首先下载xUtils,下载地址:https://github.com/wyouflf/xUtils 把下载好的文件压缩,把里面的jar包拷进项目中如图所示: 这里新建一个User类进行测试增删改查 ...
- Java实现对cookie的增删改查
原文地址:http://blog.csdn.net/k21325/article/details/54377830 @RequestMapping(value="meeting/addGua ...
- 在Salesforce中实现对Object的增删改查操作
1): Insert Statement http://www.salesforce.com/us/developer/docs/apexcode/index_Left.htm#CSHID=ap ...
- Javaweb实现对mongodb的增删改查(附带源代码)
运行截图: 删除后的信息 项目源代码:https://www.cnblogs.com/post/readauth?url=/zyt-bg/p/9807396.html
- 实现对sqlite数据库增删改查
package com.example.db.dao;import java.util.ArrayList;import java.util.List;import android.content.C ...
- H5新特性汇总
H5新特性: 新增选择器 document.querySelector.document.querySelectorAll 拖拽释放(Drag and drop) API 媒体播放的 video 和 ...
- H5新特性--WebStorage--WebSocke
今天的目标 3.2:h5新特性--WebStorage localStorage 在客户端浏览器保存数据 永久保存 保存数据 localStorage [key] = value 保存数据 loca ...
- H5新特性---Web Worker---Web Stroage
今天的目标 3.1:h5新特性八--Web Worker---代码就3行 程序:program 存储在外存(磁盘)中代码 进程:Process/Task 将程序调用内存中,分配空间 线程:Thread ...
随机推荐
- [UVA-11039]Children's Game
解析 微扰法贪心经典题 代码 #include <bits/stdc++.h> using namespace std; bool cmp(const string &x, con ...
- 20165306 实验二 Java面向对象程序设计
实验二 Java面向对象程序设计 实验要求 1.提交最后三个JUnit测试用例(正常情况,错误情况,边界情况)都通过的截图,截图上要有画图加水印,输入自己的学号.本提交点考查JUnit会不会使用,测试 ...
- 批处理数据库(利用batch插入2w条数据)
public class Demo02Batch { /* * 批处理 */ public static void main(String[] args) { Connection conn=null ...
- VC_窗口exe_printf信息
1. #include <io.h> #include <fcntl.h> #include <stdio.h> 2. void InitConsoleWindow ...
- Calendar的使用注意
一.Calendar和GregorianCalendar的关系 GregorianCalendar的一点: // 初始化 Gregorian 日历 // 使用当前时间和日期 // 默认为本地时间和时区 ...
- css 可继承属性 display:inline-block 历史
1. css 可继承属性 1.1 font font-family:规定元素的字体系列font-weight:设置字体的粗细font-size:设置字体的尺寸font-style:定义字体的风格fon ...
- Lua和C++交互 学习记录之五:全局数组交互
主要内容转载自:子龙山人博客(强烈建议去子龙山人博客完全学习一遍) 部分内容查阅自:<Lua 5.3 参考手册>中文版 译者 云风 制作 Kavcc vs2013+lua-5.3.3 1 ...
- ZOJ 3965 Binary Tree Restoring
Binary Tree Restoring 思路: 递归 比较a序列和b序列中表示同一个子树的一段区间,不断递归 代码: #include<bits/stdc++.h> using nam ...
- centos php5.4 升级 php7
接上篇,edusoho需要php5.5以上版本,于是需要升级本地php php是通过yum默认安装的.以下安装参考 link https://blog.csdn.net/u012569217/arti ...
- springmvc如何进行热部署开发
1.场景还原 在工程量大的情况下,tomcat运行部署一次会花费相当多的时间,这样太 浪费人力以及时间了:今天笔者将 讲解一下如何配置springmvc工程的热部署 2.实现方案 其实很简单! ①在t ...