<!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. 禅道Bug等级划分标准

    一.严重程序 P1:致命(该问题在测试中较少出现,一旦出现应立即中止当前版本测试) 阻碍开发或测试工作的问题:造成系统崩溃.死机.死循环,导致数据库数据丢失, 与数据库连接错误,主要功能丧失,基本模块 ...

  2. ClickHouse最简单的安装方法

    安装包地址: https://packagecloud.io/Altinity/clickhouse 无需下载安装包,更新yum源即可!! 最后: yum install -y clickhouse- ...

  3. 为什么matlab激活完后还要激活（Matlab2012b license失效解决办法）

    第一步:打开matlab安装路径中的license文件夹,删除其中的lic文件 第二步:更换新的license.lic文件 第三步:重新打开matlab 搞定! license.lic文件的内容是: ...

  4. XSS高级利用

    XSS会话劫持 (1)Cookie简介 Cookie是能够让网站服务器把少量文本数据存储到客户端的硬盘.内存,或者是从客户端的硬盘.内存读取数据的一种技术. Cookie是一段随HTTP请求.响应一起 ...

  5. UIToolBar - 官方文档

    继承关系:UIToolBar -> UIView -> UIResponder -> NSObject. toolBar是一个工具栏,用于显示一个或多个按钮.其按钮叫做toolBar ...

  6. 算法相关——Java排序算法之插入排序（四）

    0. 前言 本系列文章将介绍一些常用的排序算法.排序是一个非常常见的应用场景,也是开发岗位面试必问的一道面试题,有人说,如果一个企业招聘开发人员的题目中没有排序算法题,那说明这个企业不是一个" ...

  7. 你分得清楚Maven的聚合和继承吗？

    用了 Maven 好几年了,许多人还是只懂得简单的依赖坐标.对于 Maven 的聚合和继承还是一知半解,甚至很多人以为是同一个东西.但其实聚合是用于快速构建项目,是表示项目与子项目之间的关系.而继承则 ...

  8. Python全栈开发之路 【第四篇】：Python基础之函数

    本节内容 函数def: 1.位置参数,默认参数 2.位置参数,关键参数 3.如果参数中出现 *users,传递的参数就可以不再是固定的个数, 传过来的所有元素进行打包成元组 *args,**kwarg ...

  9. koa2实现session的两种方式（基于Redis 和MySQL）

    一.基于MySQL的实现方式 这种方式需要安装koa-session-minimal和koa-mysql-session两个依赖. 执行 npm install koa-session-minimal ...

  10. P1525 关押罪犯

    基础并查集-- #include<iostream> #include<string.h> #include<algorithm> #include<stdi ...