1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .content{
  8.             height: 1800px;
  9.             background-color: white;
  10.         }
  11.         .shade{
  12.             position: fixed;
  13.             top:0;
  14.             left: 0;
  15.             right: 0;
  16.             bottom: 0;
  17.             background-color: black;
  18.             opacity: 0.3;
  19.         }
  20.         .model{
  21.             width: 200px;
  22.             height:200px;
  23.             background-color: white;
  24.             position: absolute;
  25.             top:50%;
  26.             left: 50%;
  27.             margin-top: -100px;
  28.             margin-left: -100px;
  29.         }
  30.         .hide{
  31.             display: none;
  32.         }
  33.     </style>
  34. </head>
  35. <body>
  36. <div class="content">
  37.     <button onclick="func()">show</button>
  38. </div>
  39. <div class="shade hide">
  40.  
  41. </div>
  42. <div class="model hide">
  43.     <button onclick="cancle()">取消</button>
  44. </div>
  45. <script>
  46.     function func() {
  47.         var ele_shade = document.getElementsByClassName('shade')[0]
  48.         var ele_model = document.getElementsByClassName('model')[0]
  49.         ele_shade.classList.remove('hide') //class属性的删除
  50.         ele_model.classList.remove('hide')
  51.  
  52.     }
  53.     function cancle() {
  54.         var ele_shade = document.getElementsByClassName('shade')[0]
  55.         var ele_model = document.getElementsByClassName('model')[0]
  56.         ele_shade.classList.add('hide')//class属性的增加
  57.         ele_model.classList.add('hide')
  58.     }
  59. </script>
  60. </body>
  61. </html>

class属性

1)className

2)classList

DOM节点的增删改查以及class属性的操作的更多相关文章

  1. HTML DOM节点的增删改查

    上篇博客中,我们已经初步接触了DOM基础,可是我们学习是为了可以更好地应用,今天我们就来看看DOM节点的增删改查. 无论在哪里,我们想要操作一个东西,总是应该先去获得它.那么我们怎么获得呢? HTML ...

  2. DOM节点的增删改查

    在开始展开DOM操作前,首先需要构建一棵DOM树. <!DOCTYPE html> <html lang="en"> <head> <me ...

  3. JS DOM节点的增删改查

    合并拆分 行内样式  script写在html里面

  4. HTML DOM(二)：节点的增删改查

    上一篇讲述了DOM的基本知识,从其得知,在DOM眼中,HTML的每个成分都可以看作是节点(文档节点.元素节点.文本节点.属性节点.注释节点,其中,属性节点是属于元素节点),本篇的内容就是通过DOM对这 ...

  5. 9 HTML DOM事件监听&版本兼容&元素（节点）增删改查

    事件监听: 语法:element.addEventListener(event, function, useCapture); event:事件的类型,触发什么事件,注意不需要on作为前缀,比如cli ...

  6. ZooKeeper客户端 zkCli.sh 节点的增删改查

    zkCli.sh 在 bin 目录下的  zkCli.sh  就是ZooKeeper客户端 ./zkCli.sh -timeout 5000  -server 127.0.0.1:2181  客户端与 ...

  7. Zookeeper入门(六)之zkCli.sh对节点的增删改查

    参考地址为:https://www.cnblogs.com/sherrykid/p/5813148.html 1.连接 在 bin 目录下的  zkCli.sh  就是ZooKeeper客户端 ./z ...

  8. 页面循环绑定（变量污染问题），js面向对象编程（对象属性增删改查），js字符串操作，js数组操作

    页面循环绑定(变量污染问题) var lis = document.querySelectorAll(".ul li") for ( var i = 0 ; i < lis. ...

  9. 1、list 的一些相关操作 2、增删改查 3、tuple 的操作 4、range

    1. list(增删改查) 列表可以装大量的数据. 不限制数据类型. 表示方式:[] 方括号中的每一项用逗号隔开 列表和字符串一样.也有索引和切片 # lst = [1, "周杰伦" ...

随机推荐

  1. BOF、EOF 属性

    BOF.EOF 属性 BOF 指示当前记录位置位于 Recordset 对象的第一个记录之前. EOF 指示当前记录位置位于 Recordset 对象的最后一个记录之后. 返回值 BOF 和 EOF  ...

  2. 纯MATLAB版本 SIFT代码

    先贴几个链接: http://blog.csdn.net/abcjennifer/article/details/7639681  Rachel-Zhang的 http://blog.csdn.net ...

  3. HDOJ 2001 计算两点间的距离

    #include<iostream> #include<cstdio> using namespace std; int main() { double a, b, x, y; ...

  4. vue todolist 封装localstorage

    //封装操作localstorage本地存储的方法 模块化的文件 // nodejs 基础 var storage={ set(key,value){ localStorage.setItem(key ...

  5. css定位(后盾网)

    1.绝对定位:脱离了文档流,如果设置了left和top,位置相对浏览器来定位,如果不设值top和left,还是按照原来的文档流的位置站位,位置移走后,原来的空间位被其他元素占据 ***应用:一般来说我 ...

  6. $.extend与$.fn.extend()

    很多情况下,用户需要对jQuery插件进行二次开发,那么我们来看看JQ原开发者为我们提供的两种扩展插件的方式如下: 1.类别类:相当于为jquery扩展一个类,比如现在我要扩展一个简单的想加的功能函数 ...

  7. 插入排序(直接插入、折半、Shell)

    直接插入排序(顺序插入排序) 基本思想: 排序过程,整个排序过程为n-1趟插入,即先将序列中的第1个元素看成是一个有序子序列,然后从第2个元素开始,逐个进行插入,直至整个序列有序. 在有序序列中插入一 ...

  8. Java课程作业之动手动脑（三）

    1.以下代码为何无法通过编译?哪儿出错了? 在Foo类中已经有了一个Foo的含参构造方法,所以在定义Foo类对象时不能使用new Foo()方法.在Foo类中再写一个无参构造方法,就能编译了. 如果类 ...

  9. 【Python】python3 正则爬取网页输出中文乱码解决

    爬取网页时候print输出的时候有中文输出乱码 例如: \\xe4\\xb8\\xad\\xe5\\x8d\\x8e\\xe4\\xb9\\xa6\\xe5\\xb1\\x80 #爬取https:// ...

  10. Android Data Binding Library

    Data Binding Library Data Binding Library是一个支持库,允许您使用声明格式(而不是编程)将布局中的UI组件与应用程序中的数据源绑定. 布局通常在调用UI框架方法 ...