ホームページ > 記事 > ウェブフロントエンド > CSSのdisplay属性を使ってdiv要素を表示・非表示にする方法
CSSのdisplay属性を使ってdiv要素を表示・非表示にする方法
- PHPzオリジナル
- 2023-04-21 11:20:452141ブラウズ
ページ上の特定の要素を非表示または表示するには、CSS 表示属性を使用することがよくあります。この記事では、CSSのdisplay属性を使ってdiv要素を表示・非表示にする方法を中心に解説します。
1. CSS の表示属性
CSS の表示属性には多くの値がありますが、一般的に使用される値は次のとおりです。 : 隠し要素を追加し、要素が占めていたスペースを解放します。
- block: 要素をブロックレベルの要素として表示します。
- inline-block: 要素をインライン ブロック レベルの要素として表示します。
- inline: 要素をインライン要素として表示します。
- table: 要素をテーブル要素として表示します。
- table-row: 要素をテーブル行要素として表示します。
- table-cell: 要素を表のセル要素として表示します。
- 2.display 属性を使用して div 要素を非表示にしたり表示したりします
div 要素を非表示にする
- display 属性を使用して非表示にしますdiv 要素を解放します。 要素が占有するスペース:
div {
display: none;
}
div 要素を表示します。
- display 属性を使用して、div 要素をブロックレベル要素として表示します。
div {
display: block;
}
div {
display: inline-block;
}display 属性を使用して div 要素をインライン要素として表示します:
div {
display: inline;
}display 属性を使用して div 要素を table 要素として表示します:
div {
display: table;
}display 属性を使用して div 要素を table row 要素として表示します:
div {
display: table-row;
}display 属性を使用して表示しますテーブルのセル要素としての div 要素:
div {
display: table-cell;
}3. JavaScript を使用して div を制御する要素の非表示と表示ユーザーがクリックしたときの div 要素の非表示と表示を制御したい場合ボタンの場合、JavaScript を使用してこれを実現できます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示/隐藏div元素</title>
<style>
#myDiv {
width: 200px;
height: 200px;
background-color: #ccc;
display: block;
}
</style>
</head>
<body>
<button onclick="toggleDiv()">显示/隐藏div元素</button>
<div id="myDiv"></div>
<script>
function toggleDiv() {
var div = document.getElementById("myDiv");
if (div.style.display === "none") {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
</script>
</body>
</html>この例では、ユーザーがボタンをクリックすると、JavaScript を通じて ID myDiv を持つ div 要素が取得され、その要素の表示スタイル属性が none であるかどうかが判断されます。ブロックに設定します。それ以外の場合は、なしに設定します。これは div 要素の非表示と表示を実装します。 概要この記事の導入部を通じて、CSS の表示属性は、ページ上の要素の表示と非表示の状態を制御するために使用される非常に重要な属性であることがわかります。 CSS を使用して要素の状態を直接制御する場合でも、JavaScript を使用して対話型関数を実装する場合でも、display 属性の使用法を習得することが非常に必要です。 以上がCSSのdisplay属性を使ってdiv要素を表示・非表示にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。