css隱藏元素的方法及區別
阿新 • • 發佈：2018-12-10
1.opacity
opacity:0將元素本身及其子元素都置為不可見的，而元素本身依然佔據它自己的位置並對網頁的佈局起作用，它會響應使用者互動
2 .visibility
visibility:hidden將元素本身及其子元素都置為不可見的, 而元素本身依然佔據它自己的位置並對網頁的佈局起作用，它不會響應使用者互動.如果想讓子元素顯示，則設定子元素的visibility：visible;
3.display
display:none使用這個屬性，被隱藏的元素對網頁的佈局不起作用。不僅如此，一旦display設為none任何對該元素直接的使用者互動操作都不可能生效。此外，讀屏軟體也不會讀到元素的內容。這種方式產生的效果就像元素完全不存在。通過DOM依然可以訪問到這個元素。因此你可以通過DOM來操作
4.position
position:absolute 將top和left設定成足夠大的負數，相當於把元素放到可視區域外，它不會影響佈局，能夠讓元素保持可操作性，在讀屏軟體上可以被識別。
總結一下：opacity,visibility影響佈局，前者不影響互動，後者影響互動；
display不影響佈局，影響互動；
position 不影響佈局，不影響互動；
下面給出例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .div1 { width: 200px; height: 200px; background-color: #B4B4B4; opacity:0; } .div2 { width: 200px; height: 200px; background-color: goldenrod; visibility: hidden; } .div2-2 { width: 100px; height: 100px; background-color: lightsalmon; visibility: visible; } .div3{ width: 200px; height: 200px; background-color: green; display: none; } .div4 { width: 200px; height: 200px; background-color: greenyellow; position: absolute; top:-99em; } </style> </head> <body> <div class="div1">1</div> <div class="div2">2<div class="div2-2">2-2</div></div> <div class="div3">3</div> <div class="div4">4</div> <script> var div1 = document.querySelector(".div1"); var div2 = document.querySelector(".div2"); var div3 = document.querySelector(".div3"); var div4 = document.querySelector(".div4"); div1.onclick=function () { alert("div2"); }; div2.onclick=function () { alert("div2"); }; div3.onclick=function () { alert("div3"); }; div4.onclick=function () { alert("div4"); }; </script> </body> </html>