このエッセイのインスピレーションは、先週のインタビューで、隠し要素について話しているときに、突然、[表示: なし] と [可視性: 非表示] の違いを尋ねられました。違いはあるのでしょうか？ あるようですが、普段は[表示:なし]を使用し、[可視性:非表示]を使用することがほとんどないため、忘れていました。インタビュー後に家に帰って最初にしたことは、コードをテストすることでした。テストのプロセスと結果は次のとおりです。
1. まず、ページに 2 つの div を配置し、異なる背景色で区別します。
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>两种隐藏元素方式的区别</title> 6 <style type="text/css"> 7 div{ width: 100px; height: 100px; color: white; text-align: center; line-height: 100px; font-size: 40px;} 8 </style> 9 </head>10 <body>11 <div style="background: blue;>div1</div>12 <div style="background: red;">div2</div>13 </body>14 </html>2. div1 の [表示: なし] を設定します:
<div style="background: blue; display: none">div1</div>
3. div1 の [表示: なし] を [可視性: 非表示] に変更します:
<div style="background: blue; visibility: hidden">div1</div>
4. 概要:
【表示: なし】: 要素と要素内のすべてのコンテンツを非表示にし、要素の位置、幅、高さ、その他の属性値を「非表示」にします。
[可視性: 非表示]: 要素を非表示にし、要素内のすべてのコンテンツは削除されますが、要素の位置、幅、高さ、その他の属性値はそのまま残ります。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
