CSS ヒント: 表示属性を使用して DIV を表示および非表示にする
DIV は、ページ内で一般的に使用される要素の 1 つとして、レイアウト、書式設定、コンテンツのセグメント化で広く使用されています。実際の開発ではDIV要素の表示・非表示をコードで制御する必要がある場合がありますが、その際にはCSSのdisplay属性を利用することができます。
表示属性の役割
表示属性は、要素を表示するかどうかを制御するために使用される CSS の基本属性です。さまざまな値に設定して、さまざまな表示効果と非表示効果を実現できます。具体的には、display 属性の値は次のとおりです。
DIV の表示と非表示を実現する
次に、display 属性を使用して DIV を表示および非表示にする方法をいくつかの例を使用して説明します。
この例では、ボタンによって DIV の表示と非表示を制御します。
HTML 部分:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>CSS显示和隐藏DIV</title> <link href="css/style.css" rel="stylesheet" type="text/css" /> </head> <body> <button onclick="toggle()">点击显示/隐藏DIV</button> <div id="myDiv" style="display:none;">这是一个DIV元素</div> <script src="js/main.js"></script> </body> </html>
CSS 部分:
#myDiv { width: 200px; height: 200px; background-color: #ccc; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
JavaScript 部分:
function toggle() { var div = document.getElementById("myDiv"); if (div.style.display === "none") { div.style.display = "block"; } else { div.style.display = "none"; } }
この例では、HTML の button 要素に onclick を追加しました。イベントを作成し、トグル関数を定義します。この関数は、制御したいDIV要素をgetElementByIdメソッドで取得し、その要素の表示属性値を判定することで表示・非表示を実現します。
ボタンをクリックすると、トグル関数が現在の DIV 要素の表示属性値が none かどうかを判断し、none の場合はブロック、つまり表示に設定され、そうでない場合は表示されます。 none、つまり非表示に設定します。
この例では、要素の上にマウスを置くことで DIV の表示と非表示を制御します。
HTML 部分:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>CSS显示和隐藏DIV</title> <link href="css/style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="myDiv"> <p>鼠标悬停在这里,显示下面的DIV元素</p> <div id="myPopup">这是一个DIV元素</div> </div> </body> </html>
CSS 部分:
#myDiv { width: 200px; height: 80px; background-color: #eee; position: relative; } #myPopup { width: 100px; height: 100px; background-color: #ddd; display: none; position: absolute; top: 100%; left: 0; } #myDiv:hover #myPopup { display: block; }
この例では、ホバー セレクターを使用して DIV 要素を表示および非表示にします。マウスを myDiv 要素の上に置くと、myPopup 要素が表示され、マウスを myDiv 要素から離れると、myPopup 要素が非表示になります。このとき、myPopup要素のdisplay属性値をnoneまたはblockに設定するだけです。
この例では、DIV 要素の表示と非表示をよりスムーズかつ自然にするために、これを使用します。 CSS3のトランジションアニメーション効果を利用して実現しています。
HTML パート:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>CSS显示和隐藏DIV</title> <link href="css/style.css" rel="stylesheet" type="text/css" /> </head> <body> <button onclick="toggle()">点击显示/隐藏DIV</button> <div id="myDiv">这是一个DIV元素</div> <script src="js/main.js"></script> </body> </html>
CSS パート:
#myDiv { width: 200px; height: 200px; background-color: #ccc; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all .3s ease-in-out; }
JavaScript パート:
function toggle() { var div = document.getElementById("myDiv"); if (div.style.opacity === "0") { div.style.display = "block"; div.style.opacity = "1"; } else { div.style.opacity = "0"; setTimeout(function() {div.style.display = "none";}, 300); } }
この例では、CSS An all で myDiv 要素を定義します。 3s easy-in-out トランジション効果。myDiv 要素の display 属性値または opacity 属性値を変更すると、この効果に従ってスムーズなトランジションが行われます。
JavaScript では、setTimeout 関数を使用してコード ブロックの実行を遅らせ、トランジション効果の完了を待ちます。ボタンをクリックすると、トグル関数は現在の DIV 要素の不透明度属性値が 0 であるかどうかを判断します。0 である場合は 1 に設定され、表示属性値はブロックに設定され、表示されます。これを 0 に設定し、遷移が完了するのを待ち、最後に表示属性値を none (つまり非表示) に設定します。
まとめ
上記の 3 つの例を通して、CSS の表示属性によって DIV 要素の表示と非表示の効果を簡単に実現できることがわかります。実装プロセスでは、JavaScript とCSS3 を使用すると、効果がより豊かで自然になります。この記事が皆さんにCSSの表示属性をマスターしてもらう一助になれば幸いです。
以上がdiv css 表示 div を隠すの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。