<!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的原子提交--单文件场景

    3. 单文件提交 我们首先概要说明SQLite在单个数据库文件上为了执行事务的原子提交而采取的步骤.在后面的部分将讨论如何设计文件格式以保护其在断电故障中损坏,以及原子提交在多个数据库上的执行. 3. ...

  2. CSAPP：第八章 异常控制流1

    CSAPP:第八章 异常控制流1 关键点:异常 8.1 异常8.2 进程   现代系统通过使控制流发生突变来对这些情况做出反应,一般而言,我们把这些突变称为异常控制流(Exceptional Cont ...

  3. Rsync服务实战

    目录 1 安装rsync软件 2 配置 /etc/rsyncd.conf 3 创建用户(运行rsync服务的用户身份) 4 创建虚拟用户密码文件(客户端连接时候使用) 5启动 rsync 服务,并加入 ...

  4. 多个窗口开启后，切换到指定title的窗口

    1.在google中,可以开启多个窗口,这是需要切换到自己需要的窗口去定位元素.如下: #获取两个窗口的标题 ${titles} Selenium2Library.Get Window Titles ...

  5. Spring Security（四）：2.1 Introduction What is Spring Security?

    Spring Security provides comprehensive security services for Java EE-based enterprise software appli ...

  6. P1171 售货员的难题--搜索（剪枝）

    题目背景 数据有更改 题目描述 某乡有nn个村庄(1<n \le 201<n≤20),有一个售货员,他要到各个村庄去售货,各村庄之间的路程s(0<s<1000)s(0<s ...

  7. Android测试（二）：Android测试基础

    原文地址:https://developer.android.com/training/testing/fundamentals.html 用户在不同的级别上与你的应用产生交互.从按下按钮到将信息下载 ...

  8. windows下数据挖掘相关包numpy、pandas的安装

    安装Anaconda的绕道 这里介绍如何在windows下安装numpy/scipy/matplotlib/pandas/scikit_learn等数据分析相关包 相关环境: win7 64位 pyt ...

  9. Vscode更新之后rg.exe占用cpu过高

    文件->首选项->搜索"search.followSymlinks"改为false https://www.zhihu.com/question/67317040

  10. 开源组件ELK日志系统配置与管理

    ELK日志系统介绍 开源实时日志分析ELK平台能够完美的解决我们上述的问题,ELK由ElasticSearch.Logstash和Kiabana三个开源工具组成.官方网站:https://www.el ...