div CSS를 표시하고 숨기는 방법

CSS에서 div를 표시하고 숨기는 방법: 1. CSS의 표시 속성을 사용하여 div를 숨기거나 표시합니다. 2. CSS의 가시성 속성을 사용하여 div를 숨기거나 표시합니다.

이 기사의 운영 환경: Windows7 시스템, HTML5&&CSS3 버전, Dell G3 컴퓨터.

CSS를 사용하여 div를 표시하거나 숨기는 세 가지 방법(표시와 가시성의 차이)

1 CSS의 표시 속성을 사용하여 div를 숨기거나 표시합니다.

display 속성은 표시할 상자의 유형을 지정합니다. 요소가 생성되어야 하면 display:none을 사용하여 요소를 숨길 수 있습니다.

style="display: none;"
document.getElementById("typediv1").style.display="none";//隐藏
document.getElementById("typediv1").style.display="";//显示

2. CSS의 가시성 속성을 사용하여 div를 숨기거나 표시합니다.

가시성 속성은 visible:hidden을 통해 요소를 숨길 수 있는지 여부를 지정합니다.

style="visibility: none;"
document.getElementById("div1").style.visibility="hidden";//隐藏
document.getElementById("div1").style.visibility="visible";//显示

display 속성과 가시성 속성의 차이점:

display 속성은 요소가 표시되는 방식을 설정하는 반면, visible 속성은 요소를 표시할지 아니면 숨겨야 하는지를 지정합니다.

요소 숨기기 -display:none 또는 visible:hidden

표시 속성을 없음으로 설정하거나 가시성 속성을 숨김으로 설정하여 요소를 숨기세요. 그러나 이 두 가지 방법은 서로 다른 결과를 낳는다는 점에 유의하세요.

visibility:hidden: 요소를 숨길 수 있지만 숨겨진 요소는 숨겨지기 전과 동일한 공간을 차지해야 합니다. 즉, 요소가 숨겨지더라도 여전히 레이아웃에 영향을 미칩니다.

h1.hidden {visibility:hidden;}

display:none: 요소를 숨길 수 있으며 숨겨진 요소는 공간을 차지하지 않습니다. 즉, 요소가 숨겨질 뿐만 아니라 해당 요소가 원래 차지했던 공간도 페이지 레이아웃에서 사라집니다.

h1.hidden {display:none;}

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

【추천 학습: css 비디오 튜토리얼】

JQuery의 show() 및 hide() 메소드를 사용하여 div를 표시하거나 숨깁니다.

• show() 메소드를 사용하여 선택한 요소를 표시하고 숨깁니다.

참고: show()는 CSS의 jQuery 메소드 및 display:none에 의해 숨겨진 요소에 적용됩니다(visibility:hidden에 의해 숨겨진 요소에 적용됩니다).

구문: ​​$ (selector).show(speed,easing,callback) 특정 매개변수에 대한 자세한 내용을 보려면 여기를 클릭하세요.

$("button").click(function(){
    $("p").show();
});

• hide() 선택한 요소를 숨기는 방법:

팁: 이는 다음과 관련이 있습니다. CSS 속성 표시:유사한 항목 없음.

참고: 숨겨진 요소는 완전히 표시되지 않습니다(페이지 레이아웃에 영향을 주지 않음).

구문: ​​$ (selector).hide(speed,easing,callback) 특정 매개변수 세부정보를 보려면 여기를 클릭하세요

$("button").click(function(){
    $("p").hide();
});

위 내용은 div CSS를 표시하고 숨기는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!