DOM节点的增删改查以及class属性的操作
<!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属性的操作的更多相关文章
- HTML DOM节点的增删改查
上篇博客中,我们已经初步接触了DOM基础,可是我们学习是为了可以更好地应用,今天我们就来看看DOM节点的增删改查. 无论在哪里,我们想要操作一个东西,总是应该先去获得它.那么我们怎么获得呢? HTML ...
- DOM节点的增删改查
在开始展开DOM操作前,首先需要构建一棵DOM树. <!DOCTYPE html> <html lang="en"> <head> <me ...
- JS DOM节点的增删改查
合并拆分 行内样式 script写在html里面
- HTML DOM(二)：节点的增删改查
上一篇讲述了DOM的基本知识,从其得知,在DOM眼中,HTML的每个成分都可以看作是节点(文档节点.元素节点.文本节点.属性节点.注释节点,其中,属性节点是属于元素节点),本篇的内容就是通过DOM对这 ...
- 9 HTML DOM事件监听&版本兼容&元素（节点）增删改查
事件监听: 语法:element.addEventListener(event, function, useCapture); event:事件的类型,触发什么事件,注意不需要on作为前缀,比如cli ...
- ZooKeeper客户端 zkCli.sh 节点的增删改查
zkCli.sh 在 bin 目录下的 zkCli.sh 就是ZooKeeper客户端 ./zkCli.sh -timeout 5000 -server 127.0.0.1:2181 客户端与 ...
- Zookeeper入门(六)之zkCli.sh对节点的增删改查
参考地址为:https://www.cnblogs.com/sherrykid/p/5813148.html 1.连接 在 bin 目录下的 zkCli.sh 就是ZooKeeper客户端 ./z ...
- 页面循环绑定（变量污染问题），js面向对象编程（对象属性增删改查），js字符串操作，js数组操作
页面循环绑定(变量污染问题) var lis = document.querySelectorAll(".ul li") for ( var i = 0 ; i < lis. ...
- 1、list 的一些相关操作 2、增删改查 3、tuple 的操作 4、range
1. list(增删改查) 列表可以装大量的数据. 不限制数据类型. 表示方式:[] 方括号中的每一项用逗号隔开 列表和字符串一样.也有索引和切片 # lst = [1, "周杰伦" ...
随机推荐
- JQuery中Ajax的Post提交在IE下中文乱码的解决方法
原文地址:http://www.bitscn.com/pdb/ajax/316671.html 引言: 在JQuery的Ajax POST请求中,进行请求,其中的中文在后台,显示为乱码,该如何解决呢? ...
- CentOS 7安装Oracle 11gR2以及设置自启动（2）
6.创建表空间和用户授权 (1).连接数据库 $ sqlplus / as sysdba (2).创建数据库表空间 语法: create tablespace 表空间名 datafile ‘物理地址( ...
- 为什么QQ空间和QQ邮箱都是IE默认打开？
为什么QQ空间和QQ邮箱都是IE默认打开? 我已经设置成chrome为默认浏览器了 原文转载至:https://zhidao.baidu.com/question/390662851068217285 ...
- echart力导向图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="GBK" ...
- vue事件深入
事件对象: @click="show($event)" ev.clientX---接收 事件冒泡: 阻止冒泡: 1. ev.cancelBubble=true; 2.@click. ...
- Java - 30 Java 网络编程
Java 网络编程 网络编程是指编写运行在多个设备(计算机)的程序,这些设备都通过网络连接起来. java.net包中J2SE的API包含有类和接口,它们提供低层次的通信细节.你可以直接使用这些类和接 ...
- pycharm中快捷键的使用
转载自:https://blog.csdn.net/fighter_yy/article/details/40860949 Alt+Enter 自动添加包 shift+O 自动建议代码补全 Ctrl+ ...
- mysql where in形式存储过程如何传递带有单引号的入参
对于存储过程或者函数,我们通常都有这样的一个需求,传递一个参数,输出一个结果.如:我传递一个账号,返回这个账号所拥有的权限.但是如果这个需求改了,我要传递多个账号,获取这些账号权限,但是账号的个数不限 ...
- Java调用Jenkins接口实现远程发版
主要有以下几个要点: 1.在 Manage Jenkins 中设置Configure Global Security(主要是设置CSRF Protection中的prevent cross site ...
- list 列表 和一些操作方法
1. 什么是列表 定义: 能装对象的对象 在python中使用[]来描述列表, 内部元素用逗号隔开. 对数据类型没有要求 列表存在索引和切片. 和字符串是一样的. 2. 相关的增删改查操作(重点) 添 ...