<!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. NIO框架之MINA源码解析（五）：NIO超级陷阱和使用同步IO与MINA通信

    1.NIO超级陷阱 之所以说NIO超级陷阱,就是因为我在本系列开头的那句话,因为使用缺陷导致客户业务系统瘫痪.当然,我对这个问题进行了很深的追踪,包括对MINA源码的深入了解,但其实之所以会出现这个问 ...

  2. 文字超长隐藏为...ie7不兼容的解决办法

    把li里的a设置display:block; 代码如下: html: <ul> <li><span>2014-8-27</span><a href ...

  3. python面向对象 : 继承

    一. 初识继承 继承是一种创建新类的方式,在python中,新建的类可以继承一个或多个父类,父类又可称为基类或超类,新建的类称为派生类或子类. 当我们在定义多个类的时候,发现要用到相同的方法或变量,如 ...

  4. SpringMVC 注解详解

    SpringMVC常用注解说明 @Bean, @Configuration表示基于Java配置的类@Bean除了配置在@Configuration,也可以在@Component定义,此时没有特殊意义, ...

  5. （转）开源OpenWRT知识

    原博地址:http://www.thinkingquest.net/article/466 我们都需要使用google提供的搜索,gmail等优质服务.但是由于方墙的存在,使得大家各自搞各自的FQ办法 ...

  6. C语言中 有符号数、无符号数、整数溢出 （转）

    #include<stdio.h> void main() { int l=-1; unsigned int c=135; printf("%u\n",l+c); } ...

  7. Distributed traceability with Spring Cloud: Sleuth and Zipkin

    I. Sleuth 0. Concept Trace A set of spans that form a call tree structure, forms the trace of the re ...

  8. ELK+zookeeper+kafka+rsyslog集群搭建

    前言 环境困境: 1.开发人员无法登陆服务器 2.各系统都有日志,日志数据分散难以查找 3.日志数据量大,查询忙,不能实时 环境要求: 1.日志需要标准化   集群流程图:   角色:   软件: 以 ...

  9. Windows server 2008 R2充当路由器实现网络的互联

    1．路由器的工作原理 当IP子网中的一台主机发送IP分组给同一IP子网的另一台主机时,它将直接把IP分组送到网络上,对方就能收到.而要送给不同IP子网上的主机时,它要 选择一个能到达目的子网上的路由器 ...

  10. python初探 socket

    1.什么是socket? Socket中文译作:套接字,但是大家一般约定俗称的都用:socket.我想在解释socket是什么之前,先说它是用来干嘛的:socket是来建立‘通信’的基础,建立连接,传 ...