<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .content{

            height: 1800px;

            background-color: white;

        }

        .shade{

            position: fixed;

            top:0;

            left: 0;

            right: 0;

            bottom: 0;

            background-color: black;

            opacity: 0.3;

        }

        .model{

            width: 200px;

            height:200px;

            background-color: white;

            position: absolute;

            top:50%;

            left: 50%;

            margin-top: -100px;

            margin-left: -100px;

        }

        .hide{

            display: none;

        }

    </style>

</head>

<body>

<div class="content">

    <button onclick="func()">show</button>

</div>

<div class="shade hide">

</div>

<div class="model hide">

    <button onclick="cancle()">取消</button>

</div>

<script>

    function func() {

        var ele_shade = document.getElementsByClassName('shade')[0]

        var ele_model = document.getElementsByClassName('model')[0]

        ele_shade.classList.remove('hide') //class属性的删除

        ele_model.classList.remove('hide')

    }

    function cancle() {

        var ele_shade = document.getElementsByClassName('shade')[0]

        var ele_model = document.getElementsByClassName('model')[0]

        ele_shade.classList.add('hide')//class属性的增加

        ele_model.classList.add('hide')

    }

</script>

</body>

</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. 廖雪峰Java5集合-6Stack-1使用Stack

    1.栈的定义 栈Stack是一种后进先出(LIFO: Last In First Out)的数据结构,可以看作一端封闭的容器,先进去的元素永远在底部,最后出来. 栈有2个重要的方法: push(E e ...

  2. OSI七层

    应用层 应用程序的通信服务 telnet.HTTP.FTP.NFS.SMTP 表示层 定义数据格式和加密 加密.ASCII 会话层 如何开始.控制.结束一个会话,包括多个双向消息的控制和管理,以便在只 ...

  3. linux下的进程信息管理

  4. keras训练和保存

    https://cloud.tencent.com/developer/article/1010815 8.更科学地模型训练与模型保存 filepath = 'model-ep{epoch:03d}- ...

  5. 这些git命令判断提交到哪个分支哪个项目上

    git branch -r fuweikun@pengfei:~/e1_cp/AMSS$ git branch* 8939-E1-2104026-dev git config -l fuweikun@ ...

  6. Android数据传递，使用广播BroadcastReceiver；

    Android数据传递有很多种,Intent意图传递或使用Bundle去传递,接口监听回调传递数据,也可以把数据保存起来,使用的时候去读取等等等...,"当你知道足够多的数据传递的方式之后, ...

  7. php引用变量

    引用变量:在php中引用意味着用不同的名字访问同一个变量内容 定义方式:& 总结:$b=&$a其中$b是取到了$a的地址,随着$a的地址变化,不会重新开辟空间可以根据他们的内存占用情况 ...

  8. 读取txt文件赋值到DataGridView中

    先查看txt是每条信息之间是通过什么分割,我是通过换行符(\n)分割的, 然后再看每一条信息中字段是通过什么分割,我的字段是通过 tab键(\t)分割. 第一步 先获取到txt文件的路径: //获取绝 ...

  9. CF235C Cyclical Quest(SAM)

    /* 统计串的出现次数显然可以在自动机上匹配出来即可 但是每次都挨个匹配的话会时间爆炸 那么考虑我们把串复制一份, 然后一起在后缀自动机上跑, 当我们匹配长度大于该串长度的时候强行失配即可 可能会有旋 ...

  10. Java捕获异常的问题

    ---恢复内容开始--- 在Java编译过程中,有时候会出现输入未按照规定输入的情况,此时需要警告用户输入错误,这就会是程序运行过程中出现异常.异常就是可预测但是又没办法消除的一种错误.所以在编写过程 ...