<!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. 关于Swift中的指针的那些事

    前言 在Objective-c的世界中,一切对象都是指针.它是一种运行时语言,具体指针的对象类型将会在运行时,由系统分配.这样虽然自由,但是却并不安全. Swift世界就不一样了,Swift的世界很安 ...

  2. Android自动登录功能的实现

    登陆页面布局设计: <LinearLayout android:layout_width="wrap_content" android:layout_height=" ...

  3. 解决y7000笔记本ubuntu下wifi无法连接问题

    查看wifi与蓝牙硬件开关,发现ideapad的硬件模块都是关闭的 rfkill list all 打开终端 输入 sudo gedit /etc/rc.local 写入以下内容 进行保存 #!/bi ...

  4. 转:// LINUX下为ORACLE数据库设置大页--hugepage

    一.在解释什么情况下需要开启大页和为啥需要开启大页前先了解下Linux下页的相关的知识:以下的内容是基于32位的系统,4K的内存页大小做出的计算1)目录表,用来存放页表的位置,共包含1024个目录en ...

  5. 【Vuex】mapGetters 辅助函数

    mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性: import { mapGetters } from 'vuex' export default { // ...

  6. rabbitmq官方的六种工作模式

    1.RabbitMq1.1介绍RabbitMQ是一个消息代理:它接受并转发消息.你可以把它当成一个邮局:当你想邮寄信件的时候,你会把信件放在投递箱中,并确信邮递员最终会将信件送到收件人的手里.在这个例 ...

  7. phpstorm 免费激活码

    打开网址 http://idea.lanyus.com/ 选择获取注册码,复制生成的验证码 安装完成后,打开软件,依次选择菜单栏 Help -> Register-> Activation ...

  8. JavaScript技巧总结和本地存储(二)

    离线检测 检测是否离线,html5为此定义了一个navigator.onLine属性,这个属性为true表示设备能上网,false表示离线,这个属性还有点兼容问题.因此单独使用这个属性不能确定网络是否 ...

  9. Netty入门（二）之PC聊天室

    参看Netty入门(一):Netty入门(一)之webSocket聊天室 Netty4.X下载地址:http://netty.io/downloads.html 一:服务端 1.SimpleChatS ...

  10. Kafka 入门三问

    目录 1 Kafka 是什么? 1.1 背景 1.2 定位 1.3 产生的原因 1.4 Kafka 有哪些特征 消息和批次 模式 主题和分区 生产者和消费者 broker 和 集群 1.5 Kafka ...