ホームページ > 記事 > ウェブフロントエンド > 要素を非表示にする 2 つの方法 [表示: なし] と [可視性: 非表示] の違い_html/css_WEB-ITnose
要素を非表示にする 2 つの方法 [表示: なし] と [可視性: 非表示] の違い_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:38:011642ブラウズ
このエッセイのインスピレーションは、先週のインタビューで、隠し要素について話しているときに、突然、[表示: なし] と [可視性: 非表示] の違いを尋ねられました。違いはあるのでしょうか？ あるようですが、普段は[表示:なし]を使用し、[可視性:非表示]を使用することがほとんどないため、忘れていました。インタビュー後に家に帰って最初にしたことは、コードをテストすることでした。テストのプロセスと結果は次のとおりです。
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. 概要:
【表示: なし】: 要素と要素内のすべてのコンテンツを非表示にし、要素の位置、幅、高さ、その他の属性値を「非表示」にします。
[可視性: 非表示]: 要素を非表示にし、要素内のすべてのコンテンツは削除されますが、要素の位置、幅、高さ、その他の属性値はそのまま残ります。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。