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, "周杰伦" ...
随机推荐
- nodejs选择JavaScript作为开发语言，是因为一般的开发语言的标准库都是带有IO模块的，并且通常这个 模块是阻塞性的，所以nodejs选择了没有自带IO模块的Javascript
Javascrip本身不带IO功能,nodejs选择JavaScript作为开发语言,是因为一般的开发语言的标准库都是带有IO模块的,并且通常这个 模块是阻塞性的,所以nodejs选择了没有自带IO模 ...
- MySQL binlog 组提交与 XA(两阶段提交)--1
参考了网上几篇比较靠谱的文章 http://www.linuxidc.com/Linux/2015-11/124942.htm http://blog.csdn.net/woqutechteam/ar ...
- Authentication required (packagist.phpcomposer.com) 账号密码到哪里获取？
安装好composer后,执行composer install 报这个错 面对这个错有两种方法.1,他说你的composr 版本不够稳定,composer update 一下,或者 composer ...
- Android多线程下载
所用知识点: 1.设置http协议字段Range “bytes=“start+”-”+end conn.addRequestProperty("Range", "byte ...
- 小程序API录音 微信录音后 Silk格式转码MP3
http://www.cnblogs.com/wqh17/p/6911748.html
- Mysql 之多实例 安装以及配置
MySQL多实例 1.什么是MySQL多实例 简单地说,Mysql多实例就是在一台服务器上同时开启多个不同的服务端口(3306.3307),同时运行多个Mysql服务进程,这些服务进程通过不同的soc ...
- sas基础系列（3）-表格标颜色示例
以下代码可以直接在SAS执行查看效果 ods path reset;ods path show;ods html close;options nodate;ods pdf file="Pro ...
- 把SAS批提交添加到鼠标右键
下载注册表管理工具:RegSeeker Portable v2.57 中文绿色便携版 在RegSeeker中搜索:batch
- Ext.NET Combobox实现数据源静态配置
背景 项目中使用增值税税率, 需求原本是统一的指定税率, 譬如3% 5% 等固定的. 随着业务增加, 发现不同业务有不同的税率, 一会加一个, 一下要改很多个界面. 就想着放到统一的地方. 技术背景 ...
- js基本方法
Math.random() 日期时间函数(需要用变量调用):var b = new Date(); //获取当前时间b.getTime() //获取时间戳b.getFullYear() //获取年份b ...