显示和隐藏
元素的显示和隐藏
元素display属性可控制元素的显示和隐藏,先获取元素对象,再通过点语法调用style对象中的display属性
语法格式:
元素.style.display='none'
属性值说明:
如果display值为"none"表示隐藏
如果display值为"block"表示显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素隐藏与显示</title>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
display: block;
}
</style>
</head>
<body>
<div id="red" style="display: block;"></div>
<script>
var red = document.getElementById('red');
// 对象.style 查看当前元素的css样式声明
// css样式声明也是一个对象 可以再通过对象.属性的方式查看具体的样式
console.log(red.style.display);
red.style.display = 'none';//隐藏元素
red.style.display = 'block';//显示元素
</script>
</body>
</html>
案例:点击关闭按钮 隐藏图片
使用显示和隐藏属性关闭图片
图片的对齐方式
绑定关闭按钮事件,隐藏图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素隐藏与显示</title>
<style>
#red {
width: 200px;
height: 200px;
background-color: red;
display: block;
}
#img{
width:122px;
text-align: right;
position: fixed;
right: 0;
top:200px;
}
</style>
</head>
<body>
<div id="red" style="display: block;"></div>
<div id = "img">
<img id="target" src='img02-5.png' alt="">
<img id="colse" src='img01-5.png' alt="">
</div>
<script>
// 点击关闭按钮 关闭图片
// 找到页面元素 关闭的小图片和被关闭的大图片 保存到变量中
var target = document.getElementById('target')
var close = document.getElementById('close')
// 为小图片添加一个鼠标点击的事件
// 当小图片被点击后 将两个图片全部隐藏
close.onclic = function(){
target.style.display = "none";
close.style.display = 'none';
}
// 点击隐藏div img
</script>
<script>
var red = document.getElementById('red');
// 对象.style 查看当前元素的css样式声明
// css样式声明也是一个对象 可以再通过对象.属性的方式查看具体的样式
console.log(red.style.display);
red.style.display = 'none';//隐藏元素
red.style.display = 'block';//显示元素
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>对话框</title>
<style>
html,body{
height: 100%;
margin: 0%;
}
#bg {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
display: none;
}
#box{
width:300px;
height: 400px;
background-color: #fff;
border-radius: 5px;
position: fixed;
top:50%;
left: 50%;
margin-top: -200px;
margin-left: -150px;
display: none;
}
</style>
</head>
<body>
<!-- 半透明的背景(遮罩层)-->
<div id="bg"></div>
<!-- 弹框(模态框)-->
<div id="box">
<span id="close">X</span>
</div>
<button id="open">显示弹窗</button>
<script>
// 获取页面中需要的元素
var open = document.getElementById('open')
var bg = document.getElementById('bg')
var box = document.getElementById('box')
var close = document.getElementById('close')
// 为open绑定点击事件
// 找到背景和弹框 将他们的属性display改为block
open.onclick=function(){
bg.style.display = 'block';
box.style.display = 'block';
}
// 为close绑定点击事件
// 找到背景和弹框 将他们的属性display改为none
close.onclick = function(){
bg.style.display = 'none';
box.style.display = 'none';
}
</script>
</body>
</html>
作者：暄总-tester
