原生JS实现增加删除class
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.night-mode{
background:#383838;
color:#888888;
}
</style> <script type="text/javascript"><br>//判断样式是否存在
function hasClass(ele, cls) {
return ele.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)"));
}
//为指定的dom元素添加样式
function addClass(ele, cls) {
if (!this.hasClass(ele, cls)) ele.className += " " + cls;
}
//删除指定dom元素的样式
function removeClass(ele, cls) {
if (hasClass(ele, cls)) {
var reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");
ele.className = ele.className.replace(reg, " ");
}
}
//如果存在(不存在),就删除(添加)一个样式
function toggleClass(ele,cls){
if(hasClass(ele,cls)){
removeClass(ele, cls);
}else{
addClass(ele, cls);
}
}
//调用
function toggleClassTest(){
var ele = document. getElementsByTagName('body')[0];
toggleClass(ele,"night-mode");
}
</script>
</head> <body>
<div style = "width:250px;height:100px;">
<p>这是一段文字 </p>
<p>这是一段文字 </p>
<p>这是一段文字 </p>
<p>这是一段文字 </p>
<p>这是一段文字 </p>
<p>这是一段文字 </p>
<p>这是一段文字 </p>
<p>这是一段文字 </p>
<p>这是一段文字 </p>
<p>这是一段文字 </p>
<p>这是一段文字 </p>
<p>这是一段文字 </p>
<p>这是一段文字 </p>
<p>这是一段文字 </p>
<p>这是一段文字 </p>
</div>
<input type = "button" value = "变黑" onclick = "toggleClassTest();" />
</body>
</html>
原生JS实现增加删除class的更多相关文章
- 原生js添加和删除类
原生js添加和删除类: this.className +=" "; this.className = this.className.replace(" 原来的类" ...
- jquery与原生JS实现增加、减小字号功能
预览效果: 实现代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- JS动态增加删除UL节点LI
JS如何动态增加删除UL节点LI及相关内容. <ul id="ul"> <li id=1>11111111111111111<a href=" ...
- 原生js实现增加(addclass),删除(removeclass),判断是否存在(hasclass),如果存在删除,如果不存在添加(toggleclass)和获取类名(getbyclass)的方法
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- JS动态增加删除UL节点LI及相关内容示例
<ul id="ul"> <li id=1>11111111111111111<a href="javascript:del(1);&quo ...
- js 输入框增加删除操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 原生JS 添加或者删除某个class
$S.addHandler($S.getId(fav[i]),'mouseover',function(){ this.className += " " ...
- 原生JS添加类名 删除类名
为 <div> 元素添加 class: document.getElementById("myDIV").classList.add("mystyle&quo ...
- 原生js实现一个侧滑删除取消组件(item slide)
组件,本质上是解决某个问题封装的类,在此记录原生js实现侧滑删除 先上效果图 实现思路 1. 确定渲染的数据结构 2. 思考划分布局,总的有两个主要的模块:内容区域和按钮区域 2.1 内容区域保持宽度 ...
随机推荐
- tomcat 设置连接数
maxConnections.maxThreads.acceptCount的含义及关系maxThreads:tomcat同时处理请求的任务个数,默认值为200maxConnections :tomca ...
- UVA12107-Digit Puzzle(迭代加深搜索)
Problem UVA12107-Digit Puzzle Accept:85 Submit:612 Time Limit: 3000 mSec Problem Description Inpu ...
- 【移动端】icon中ng-cordova使用
cordova介绍 Cordova提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头.麦克风等. Cordova支持如下7种移动操作系统:iOS ...
- ubuntu1604配置ss代理
1 安装ss 参考http://www.cnblogs.com/mdzz/p/10140066.html sudo apt install python3-pip sudo pip3 install ...
- Scarpy 起始url 自定义代理 自定义去重规则
- start_urls - 内部原理 """ scrapy引擎来爬虫中去起始的URL: 1. 调用start_requests并获取返回值 2. v = iter(返回 ...
- 2018-2019-3《Java程序设计》第二周学习总结
学号20175329 2018-2019-3<Java程序设计>第二周学习总结 教材学习内容总结 第二三章与我们所学习的C语言有很多的相似点,在这里我想主要就以我所学习的效果来讨 ...
- 【vue】vue-router路径无法正确跳转
具体描述:vue项目,npm run build时点击路由切换,第一次点击没问题,再点不会切换报错如下图 原因分析:vue-router配置路由,当代码分割和懒加载时,由于webpack配置不当,导致 ...
- Scala--模式匹配和样例类
模式匹配应用场景:switch语句,类型查询,析构,样例类 一.更好的switch val ch :Char = '+' val sign = ch match{ case '+' => 1 c ...
- Spring Cloud 分布式链路跟踪 Sleuth + Zipkin + Elasticsearch【Finchley 版】
随着业务越来越复杂,系统也随之进行各种拆分,特别是随着微服务架构的兴起,看似一个简单的应用,后台可能很多服务在支撑:一个请求可能需要多个服务的调用:当请求迟缓或不可用时,无法得知是哪个微服务引起的,这 ...
- 基于 Vue + Koa2 + MongoDB + Redis 实现一个完整的登录注册
项目地址:https://github.com/caochangkui/vue-element-responsive-demo/tree/login-register 通过 vue-cli3.0 + ...