<!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的更多相关文章

  1. 原生js添加和删除类

    原生js添加和删除类: this.className +=" "; this.className = this.className.replace(" 原来的类" ...

  2. jquery与原生JS实现增加、减小字号功能

    预览效果: 实现代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  3. JS动态增加删除UL节点LI

    JS如何动态增加删除UL节点LI及相关内容. <ul id="ul"> <li id=1>11111111111111111<a href=" ...

  4. 原生js实现增加（addclass）,删除（removeclass）,判断是否存在（hasclass）,如果存在删除，如果不存在添加（toggleclass）和获取类名（getbyclass）的方法

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  5. JS动态增加删除UL节点LI及相关内容示例

    <ul id="ul"> <li id=1>11111111111111111<a href="javascript:del(1);&quo ...

  6. js 输入框增加删除操作

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 原生JS 添加或者删除某个class

    $S.addHandler($S.getId(fav[i]),'mouseover',function(){                this.className += " " ...

  8. 原生JS添加类名 删除类名

    为 <div> 元素添加 class: document.getElementById("myDIV").classList.add("mystyle&quo ...

  9. 原生js实现一个侧滑删除取消组件（item slide）

    组件,本质上是解决某个问题封装的类,在此记录原生js实现侧滑删除 先上效果图 实现思路 1. 确定渲染的数据结构 2. 思考划分布局,总的有两个主要的模块:内容区域和按钮区域 2.1 内容区域保持宽度 ...

随机推荐

  1. SQlite源码分析--源网站

    http://huili.github.io/B-treeImplementation/hierarchicalorganization.html SQLite中的B-tree SQLite中每个数据 ...

  2. centos7下安装docker（18.2docker日志---ELK）

    ELK是三个软件得组合:Elasticsearch,Logstash,Kibana Elasticsearch:实时查询的全文搜索引擎.Elasticsearch的设计目的就是能够处理和搜索巨量的日志 ...

  3. pgsql SQL复杂查询示例

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code   WITH tmp AS(SELECT sum(sessioncount) as v ...

  4. Python中关于if __name__=='__main__'的问题

    先举一个简单的例子: 这里有两个.py的文件,a.py和b.py a.py内容为: b.py的内容为: 当执行b.py时结果为: 也就是将a.py文件里的内容执行一边,b.py里的内容执行一边,这显然 ...

  5. face recognition[翻译][深度人脸识别:综述]

    这里翻译下<Deep face recognition: a survey v4>. 1 引言 由于它的非侵入性和自然特征,人脸识别已经成为身份识别中重要的生物认证技术,也已经应用到许多领 ...

  6. CSS选择器之基本选择器总结

    一.元素选择器(所有浏览器支持) 元素选择器(标签名选择器)其实就是文档的元素,如html,body,p,div等等, 下面例子中选择了span元素,并设置了字体颜色为红色. <body> ...

  7. npm install 安装报错：npm ERR! EPERM npm ERR! -4048 npm ERR! Error: EPERM: operation not permitted, unlink 'D:\test\demo\code\materialT\node_modules\.staging'

    更新项目依赖包,删除掉package-lock.json.node_modules,运行npm install,报如上错误信息,查询资料说是没有权限,本人用管理员身份打开powershell,运行np ...

  8. 下拉框选择blur与click冲突问题

    缘由:今天在做下拉框选择时,遇到click和blur冲突问题:具体现象如下 1.intput框获取焦点(focus事件)时显示隐藏的下拉框,失去焦点(blur事件)则隐藏下拉框 2.点击选择(clic ...

  9. mysql安装与配置详情

    一.概述 MySQL版本:5.6.43 下载地址:mysql-installer-community-5.6.43.0,提取码:tgmk 客户端工具:NavicatforMySQL 下载地址:Navi ...

  10. Redis中的数据结构

    1. 底层数据结构, 与Redis Value Type之间的关系 对于Redis的使用者来说, Redis作为Key-Value型的内存数据库, 其Value有多种类型. String Hash L ...