css 非表示 div を表示

CSS の DIV の非表示と表示

Web 開発では、要素の非表示と表示は、特に動的な効果を作成する場合に頻繁に使用されるタスクです。 CSS を使用すると、要素の表示と非表示を簡単に行うことができ、Web サイトの読み込みが速くなり、ユーザー エクスペリエンスが向上します。

1. display 属性

display 属性は、要素の表示方法を制御できます。次の値があります:

• none: 要素が表示されず、占有スペースが 0 であることを示します。
• block: 要素が 1 行を占めるブロックレベルの要素として表示されることを示します。
• inline: 要素が改行なしでインライン要素として表示され、順番に配置されることを示します。
• inline-block: 要素が行の折り返しなしでインラインのブロックレベル要素として表示されますが、幅、高さ、パディングなどの属性を設定できることを示します。
• table: 要素がテーブルとして表示されることを示します。
• table-cell: 要素が表のセルとして表示されることを示します。
• flex: 要素が柔軟なレイアウトを採用していることを示します。
• grid: 要素がグリッド レイアウトを採用していることを示します。

たとえば、display:none を使用して要素を非表示にできます:

<div style="display:none;">这是一个被隐藏的元素</div>

display:block を使用して要素をブロックレベルの要素として表示します:

<div style="display:block;">这是一个显示为块级元素的元素</div>

2. visibility 属性

visibility 属性は要素の可視性を制御できます。次の値があります:

• visible: 要素が表示されていることを示します。
• hidden: 要素は表示されませんが、それでもスペースを占有することを示します。

たとえば、visibility:hidden を使用して要素を非表示にできます。

<div style="visibility:hidden;">这是一个被隐藏的元素</div>

visibility:visible を使用して要素を表示します。

3. 不透明度属性

不透明度属性は、要素の透明度を制御できます。値の範囲は 0 ～ 1 で、0 は完全に透明、1 は不透明を意味します。

たとえば、要素を半透明に設定できます。

<div style="opacity:0.5;">这是一个半透明的元素</div>

4. CSS3 アニメーション

上記の 3 つの方法に加えて、次のようにします。 CSS3 アニメーションを使用して要素を非表示にしたり表示したりすることもできます。 CSS3 アニメーションは、より豊かな効果を生み出し、Web サイトのインタラクティブ性を向上させることができます。

たとえば、@keyframes を使用して非表示から表示へのアニメーションを定義できます:

@keyframes showDiv {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

<div class="show" style="opacity:0;">这是一个被隐藏的元素</div>

<style>
.show {
    animation: showDiv 1s forwards;
}
</style>

上記のコードでは、まず @keyframes ルールを定義します。これは、透明からの遷移を定義します。 0 ～ 透明度 1 のアニメーション効果。次に、要素内で class="show" と初期透明度を 0 に設定します。最後に、アニメーション属性がスタイル シートの .show クラスに追加され、アニメーションの名前、期間、終了後のスタイル シートの状態が指定されます。

このクラスの追加と削除を制御することで、要素の表示状態を切り替えることができます。

var div = document.getElementsByClassName("show")[0];
div.classList.add("show");

var div = document.getElementsByClassName("show")[0];
div.classList.remove("show");

概要

上記の内容では、次のメソッドを使用して要素を非表示および表示する方法を紹介します。 CSS: 表示属性、可視性属性、不透明度属性、CSS3 アニメーションなどのメソッド。これらの方法をマスターすると、よりエレガントで洗練された Web ページ効果を実現することができます。

以上がcss 非表示 div を表示の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。