隐藏元素之后，它在页面的行为如何？
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>Document
title> <style> .target {
width: 200px; height: 200px; background-color: red; }
style>
head> <body> <div class="target">
div> <script> const e = document.getElementsByClassName('target')[0] e.addEventListener('click', () => console.log('点击我了~~'))
script>
body>
html> 1.设置display: none;
引入css文件
/*display.css*/ .target {
display: none; } 显示结果
div被隐藏了，并且点击哪里都不会触发点击事件，所以元素的行为也被禁止了
2.设置overflow: hidden;
.target{
overflow: hidden; } 
这个属性意为将超出的部分隐藏掉
点击可见区域可以触发点击行为，点击隐藏区域不可以触发点击就行为
3.设置opacity: 0;
引入css文件
/*opacity.css*/ .target {
opacity: 0; } 
元素不见了，但是在页面中依然占据位置，并且能够触发点击事件
4.设置position: absolute; + 大负left + 大负top
引入css文件
.target {
position: absolute; top: -999px; left: -999px; transition: all 3s; } 
在页面中发现不到已经隐藏的元素，那就更别说点击它了，这个一般可以用来做出场动画
这里我是给document绑定了点击事件，不是自己飘出来的哈
5.设置visibility: hidden;
引入css文件
.target {
visibility: hidden; } 
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/225160.html原文链接：https://javaforall.net
