标签：控制 function 模态框 说明 meta osi idt code port
元素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>
标签：控制 function 模态框 说明 meta osi idt code port
原文地址：https://www.cnblogs.com/sean-test/p/14768586.html
