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, "周杰伦" ...
随机推荐
- centos7 安装pip+python3.6
centos7安装pip 1.执行:yum install python-pip 若没有python-pip包,先执行:yum -y install epel-release,再执行yum insta ...
- vue的坑
1. (vue2.x以上,1.x没有问题)vue和jq一起使用的冲突:在使用了v-bind: class的元素上,当vue和jq都需要增改class时,用jq加的属性可能无效. 原因:当数据的布尔值改 ...
- mysql数据库数据备份与恢复
备份数据: C:\Users\Administrator>mysqldump -uroot --password -v test01 test02 >e:\temp\\a3.sql Ent ...
- Python工程化小结
对如何写一个工业级的Python项目作一个top-down小结. 一.项目结构 顶层结构: 文件夹: model可以是项目中的自定义类: utils是一些工程工具,比如log,tracker log存 ...
- Hadoop简介与分布式安装
Hadoop的基本概念和分布式安装: Hadoop 简介 Hadoop 是Apache Lucene创始人道格·卡丁(Doug Cutting)创建的,Lucene是一个应用广泛的文本搜索库,Hado ...
- Java - 26 Java 数据结构
Java 数据结构 Java工具包提供了强大的数据结构.在Java中的数据结构主要包括以下几种接口和类: 枚举(Enumeration) 位集合(BitSet) 向量(Vector) 栈(Stack) ...
- CS229 3.用Normal Equation拟合Liner Regression模型
继续考虑Liner Regression的问题,把它写成如下的矩阵形式,然后即可得到θ的Normal Equation. Normal Equation: θ=(XTX)-1XTy 当X可逆时,(XT ...
- .Net 大型分布式基础服务架构横向演变概述(转)
一. 业务背景 构建具备高可用,高扩展性,高性能,能承载高并发,大流量的分布式电子商务平台,支持用户,订单,采购,物流,配送,财务等多个项目的协作,便于后续运营报表,分析,便于运维及监控. 二. 基础 ...
- show processlist结果筛选(转)
在MySQL里面 show variables where variable_name like '%auto%' 这条语句可以正常执行,但是 show processlist where host ...
- com.alibaba.dubbo.rpc.RpcException: Fail to start server(url: dubbo://192.16。。
开启了linux的zookeeper服务,启动e3-manager时发现出现com.alibaba.dubbo.rpc.RpcException: Fail to start server(url: ...