ホームページ > ウェブフロントエンド > CSSチュートリアル > DIV レイヤーの表示と非表示を制御する CSS を実装する方法

DIV レイヤーの表示と非表示を制御する CSS を実装する方法

不言
リリース: 2018-06-14 17:10:58
オリジナル
2995 人が閲覧しました

この記事では、CSS で p レイヤーの表示と非表示を制御する方法を紹介します。これは、フロントエンド学習で習得する必要がある基本的な知識です。興味のある友人は一緒に学習してください。

CSSでの表示と可視性属性

CSSでの表示と可視性は、Pレイヤーを含むHTML要素を非表示にしたり表示したりすることができます。この2つは非常によく似ているため、混同する人も少なくありません。 2 つのプロパティを以下に紹介します:

display:none|block;

display:none;

正確には、画面スペースを占有せずにブラウザ内の要素を非表示にします。その下に他の要素がある場合は、そのスペース領域まで移動します (たとえば、テーブルの上に 100 元がありますが、今はそれを隠すために引き出しに入れています。テーブルの上には他に何でも置くことができます) 100元が置かれます)。

dispaly:block;

別の要素がスペースを占有している場合、その要素は下に移動し、そのスペースは再び元の要素によって占有されます。 (引き出しから100元を取り出し、テーブルに戻します)。

visibility:hidden|visible;

visibility:hidden;

要素を非表示にします。実際には非表示になりますが、それでもそのスペースを占有します。この時、(テーブルの上に100元がありました。テーブルクロスをかけて隠しましたが、お金はまだありました)。

visibility:visible;

要素を表示させます(テーブルクロスを外すと100元が表示されます)。

つまり、display 属性と Visibility 属性は、HTML 要素が存在するかどうか、およびそれが表示されるかどうかをそれぞれ制御します。display 属性は要素が存在するかどうかを定義しますが、visibility 属性は要素が表示されるかどうかのみを制御し、要素は実際にはまだ存在します。

次に、コードを例として使用してみましょう。 コード:

<html>   
<head>   
<script type="text/javascript">   
function testDisplay()   
{   
    var pD = document.getElementById("testD");   
    if(pD.style.display=="none")   
    {   
        pD.style.display = "block";   
    }   
    else   
    {   
        pD.style.display = "none";   
    }   
}   
function testVisibility()   
{   
    var pV = document.getElementById("testV");   
    if(pV.style.visibility =="hidden")   
    {   
        pV.style.visibility ="visible";   
    }   
    else   
    {   
        pV.style.visibility = "hidden";   
    }   
}   
</script>   
</head>   
</body>   
<p id="testD" style="border:#ddd 1px solid">   
    <p style="display:block;border:#ccc 2px solid">   
        <p style="visibility:visible;border:#aaa 2px solid">   
        Display   
        </p>   
    </p>   
</p>   
<p id="testV" style="border:#ddd 1px solid">   
    <p style="display:block;border:#ccc 2px solid">   
        <p style="visibility:visible;border:#aaa 2px solid">   
        Visibility   
        </p>   
    </p>   
</p>   
<input type="button" value="TestDisplay" onclick="testDisplay()"/>   
<input type="button" value="TestVisibility" onclick="testVisibility()"/>   
</body>   
</html>
ログイン後にコピー

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語に注目してください。 Webサイト!

関連する推奨事項:

CSS Flex について エラスティックレイアウトの分析

CSS3デフォルトの疑似クラスセレクター

以上がDIV レイヤーの表示と非表示を制御する CSS を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート