CSSのdisplay属性を使ってdiv要素を表示・非表示にする方法-フロントエンドQ&A-php.cn

CSSのdisplay属性を使ってdiv要素を表示・非表示にする方法

PHPz

リリース： 2023-04-21 13:55:22

オリジナル

2189 人が閲覧しました

ページ上の特定の要素を非表示または表示するには、CSS 表示属性を使用することがよくあります。この記事では、CSSのdisplay属性を使ってdiv要素を表示・非表示にする方法を中心に解説します。

1. CSS の表示属性

CSS の表示属性には多くの値がありますが、一般的に使用される値は次のとおりです。 : 隠し要素を追加し、要素が占めていたスペースを解放します。

inline-block: 要素をインラインブロックレベルの要素として表示します。
inline: 要素をインライン要素として表示します。
table: 要素をテーブル要素として表示します。
table-row: 要素をテーブル行要素として表示します。
table-cell: 要素を表のセル要素として表示します。
2.display 属性を使用して div 要素を非表示にしたり表示したりします

div 要素を非表示にする

display 属性を使用して非表示にしますdiv 要素を解放します。要素が占有するスペース:

div {
  display: none;
}

ログイン後にコピー

div 要素を表示します。

display 属性を使用して、div 要素をブロックレベル要素として表示します。

div {
  display: block;
}

ログイン後にコピー

display 属性を使用して div 要素をインラインブロックレベル要素として表示します:

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 サイトの他の関連記事を参照してください。