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, "周杰伦" ...
随机推荐
- Hive - ORC 文件存储格式【转】
一.ORC File文件结构 ORC的全称是(Optimized Row Columnar),ORC文件格式是一种Hadoop生态圈中的列式存储格式,它的产生早在2013年初,最初产生自Apache ...
- 禅道在docker上部署与迁移
一.禅道部署 1.下载地址 禅道开源版: http://dl.cnezsoft.com/zentao/docker/docker_zentao.zip 数据库用户名: root,默认密码: 123 ...
- 使用 keepalived 设置虚拟 IP 环境（转载）
使用 keepalived 设置虚拟 IP 环境 原文地址:https://blog.csdn.net/kongxx/article/details/73173762 使用 keepalived 设置 ...
- 您真的会修改Active Directory域控制器计算机名称吗
从我开始做微软这行开始,就经常听说某某公司由于什么原因需要修改Active Directory域控制器计算机名称,但发现好多公司都是直接修改,导致了各种奇葩的问题,今天就给大家推荐一个修改Active ...
- AnimDynamics简介
转自:http://www.cnblogs.com/corgi/p/5405452.html AnimDynamics简介 AnimDynamics是UE4.11 Preview 5测试版本发布的An ...
- 使用Dotfuscator混淆你的.net程序
简介 众所周知C#等net框架的程序是无法防止反编译的,但可以通过混淆,让反编译出来的代码非常难看. Dotfuscator是微软推荐使用的第三方混淆器,用来保护你的net程序.可以在安装VS的时候顺 ...
- tips：Java的Random类和Random函数
tips:Java的Random类和Random函数! 随机数是一个很有趣的东西,在java中可以通过下面这2种方法得到: (1)Random类: Random类是java.util.Random这个 ...
- oracle start with connect by prior 递归查询用法
start with 子句:遍历起始条件,有个小技巧,如果要查父结点,这里可以用子结点的列,反之亦然. connect by 子句:连接条件.关键词prior,prior跟父节点列parentid放在 ...
- Java框架相关
问题及答案来源自<Java程序员面试笔试宝典>第五章 Java Web 5.3 框架 11.什么是IoC? IoC:控制反转(Inverse of Control, IoC),有时候也被称 ...
- ubuntu 手动修改分辨率为1920 X 1080 的两种方式
方案一(临时性,重启会失效): 1.打开终端.输入:cvt 1920 1080 出现有modeline 的提示. 2.使用 xrandr 创建新的 mode,--newmode 后面跟刚刚 cvt 产 ...