<!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. JAVA序列化和反序列化XML

    package com.lss.utils; import java.beans.XMLDecoder; import java.beans.XMLEncoder; import java.io.Bu ...

  2. 008_python内置语法

    一. 参考:http://www.runoob.com/python/python-built-in-functions.html (1)vars() 描述 vars() 函数返回对象object的属 ...

  3. Android自定义相机拍照并使用CardView展示

    直接上完整代码:在Android Studio新建一个项目,然后依次创建: 1.预先在drawable文件夹中保存的图片资源 2.创建:CameraPreView.java类: 3.创建:OnClic ...

  4. 在Ubuntu上快速搭建基于Beego的RESTful API

    最近在研究Go,打算基于Go做点Web API,于是经过初步调研,打算用Beego这个框架,然后再结合其中提供的ORM以及Swagger的集成,可以快速搭建一个RESTful API的网站. 下面是具 ...

  5. face recognition[variations of softmax][L-Softmax]

    本文来自<Large-Margin Softmax Loss for Convolutional Neural Networks>,时间线为2016年12月,是北大和CMU的作品. 0 引 ...

  6. __attribute__ 机制详解(一)

    GNU C 的一大特色就是__attribute__ 机制.__attribute__ 可以设置函数属性(Function Attribute).变量属性(Variable Attribute)和类型 ...

  7. IntelliJ IDEA 破解方法

    2017版破解方法: 1. 到网站http://idea.lanyus.com/,按要求修改电脑HOST,获取注册码: 使用前请将“0.0.0.0 account.jetbrains.com”添加到h ...

  8. java 变量 final 小结

    通过查看hashCode发现,变量声明final后,不能修改,上级修改时候,重新获得对象hashCode变化 public static void main(String[] args) { // T ...

  9. Luogu P5168 xtq玩魔塔

    这题不错啊,结合了一些不太传统的姿势. 首先看到题目有一问从一个点到另一个点边权最小值.想到了什么? 克鲁斯卡尔生成树+倍增?好吧其实有一个更常用NB的算法叫克鲁斯卡尔重构树 (不会的可以看dalao ...

  10. 史上最全面的Docker容器引擎使用教程

    目录 1.Docker安装 1.1 检查 1.2 安装 1.3 镜像加速 1.4 卸载Docker 2.实战Nginx 3.Docker命令小结 4.DockerFile创建镜像 4.1 Docker ...