div css 表示 div を隠す-フロントエンドQ&A-php.cn

div css 表示 div を隠す

王林

リリース： 2023-05-27 11:03:07

オリジナル

1091 人が閲覧しました

CSS ヒント: 表示属性を使用して DIV を表示および非表示にする

DIV は、ページ内で一般的に使用される要素の 1 つとして、レイアウト、書式設定、コンテンツのセグメント化で広く使用されています。実際の開発ではDIV要素の表示・非表示をコードで制御する必要がある場合がありますが、その際にはCSSのdisplay属性を利用することができます。

表示属性の役割

表示属性は、要素を表示するかどうかを制御するために使用される CSS の基本属性です。さまざまな値に設定して、さまざまな表示効果と非表示効果を実現できます。具体的には、display 属性の値は次のとおりです。

none: 要素を非表示にすることは、ページ上の要素のスペースを完全に削除することと同じです。この要素はスペースを占有せず、レンダリングされません。
block: 要素をブロックレベルの要素として表示します。つまり、要素は排他的な行を占有し、ラベルの前後で自動的に折り返されます。幅、高さ、マージン、パディングなどのスタイルを設定できます。
inline: 要素をインライン要素として表示します。つまり、要素は排他的な行を占有せず、最後に自動的に折り返されます。幅、高さ、マージン、パディングなどのスタイルは設定できません。
inline-block: 要素を、ブロックレベル要素の特性を持つインラインブロック要素として表示します。複数のインライン要素を同じ行に表示するように設定することもできます。
table、table-row、table-cell など: 要素をテーブルとそのセル要素として表示します。

DIV の表示と非表示を実現する

次に、display 属性を使用して DIV を表示および非表示にする方法をいくつかの例を使用して説明します。

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、つまり非表示に設定します。

:hover セレクターを使用して 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>
    <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に設定するだけです。

CSS3 トランジションアニメーションを使用して DIV を表示および非表示にする

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