JavaScript05
2021-05-29 13:00
标签：控制 function 模态框 说明 meta osi idt code port 元素display属性可控制元素的显示和隐藏,先获取元素对象,再通过点语法调用style对象中的display属性 语法格式: 属性值说明: 如果display值为"none"表示隐藏 如果display值为"block"表示显示 案例:点击关闭按钮 隐藏图片 使用显示和隐藏属性关闭图片 图片的对齐方式 绑定关闭按钮事件,隐藏图片 JavaScript05 标签：控制 function 模态框 说明 meta osi idt code port 原文地址：https://www.cnblogs.com/sean-test/p/14768586.html显示和隐藏
元素的显示和隐藏
元素.style.display=‘none‘
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">Xspan>
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>