DIV レイヤーの表示と非表示を制御する CSS を実装する方法-CSSチュートリアル-php.cn

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

不言

リリース： 2018-06-14 17:10:58

オリジナル

2933 人が閲覧しました

この記事では、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サイト！