집 > 기사 > 웹 프론트엔드 > DIV 레이어의 표시 및 숨기기를 제어하기 위해 CSS를 구현하는 방법

DIV 레이어의 표시 및 숨기기를 제어하기 위해 CSS를 구현하는 방법

不言원래의: 2018-06-14 17:10:582938검색

이 글에서는 CSS를 사용하여 p 레이어의 표시 및 숨기기를 제어하는 방법을 소개합니다. 이는 프론트엔드 학습에서 꼭 익혀야 할 기본 지식이며 관심 있는 친구들이 함께 배워야 할 내용입니다.

CSS의 표시 그리고 가시성 속성

css의 표시 및 가시성은 p 레이어를 포함한 html 요소를 숨기거나 표시할 수 있습니다. 둘은 매우 유사해 많은 사람들이 혼동합니다. 두 가지 속성은 아래에 소개되어 있습니다.

display:none;

정확하게 말하면 화면 공간을 차지하지 않고 브라우저에서 요소를 제거합니다. 그 아래에 다른 요소가 있으면 해당 공간 영역으로 이동합니다. (예를 들어 테이블 위에 100위안이 있는데 이제는 그것을 숨기려고 서랍에 넣었고, 다른 것은 테이블 위에 놓을 수 있습니다. 100위안이 배치됩니다).

dispaly:block;

숨겨진 HTML 요소를 표시합니다. 다른 요소가 공간을 차지하면 해당 요소는 아래로 이동하고 해당 공간은 다시 원래 요소가 차지하게 됩니다. (서랍에서 100위안을 꺼내 테이블 위에 다시 올려놓는다.)

visibility:hidden|visible;

visibility:hidden;

요소를 숨기세요. 실제로는 숨겨져 있지만 여전히 해당 공간을 차지합니다. 이때 (탁자 위에 100위안이 있었다. 감추기 위해 식탁보로 덮어두었는데 돈은 그대로 있었다).

visibility:visible;

요소를 표시합니다(식탁보를 제거하면 100위안이 표시됩니다).

따라서 표시 및 가시성은 각각 html 요소의 존재 여부와 표시 여부를 제어하는 반면, 가시성 속성은 실제로 여전히 존재하는 요소의 표시 여부만 제어합니다.

다음은 코드를 예로 들어보겠습니다. 코드:

<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>

위 내용은 모두의 학습에 도움이 되기를 바랍니다. 웹사이트!

DIV 레이어의 표시 및 숨기기를 제어하기 위해 CSS를 구현하는 방법

관련 기사