Jquery에서 요소를 숨기는 방법

jquery에서 요소를 숨기는 방법: 1. HTML 샘플 파일을 만듭니다. 2. 요소에 ID를 설정합니다. 3. "$("#id").hide()" 메서드를 통해 요소를 숨깁니다.

이 기사의 운영 환경: Windows 7 시스템, jquery 버전 3.2.1, DELL G3 컴퓨터

jquery에서 요소를 숨기는 방법은 무엇입니까?

jquery를 사용하여 요소 숨기기 및 표시를 제어하는 ​​여러 가지 방법:

구성이 약간 지저분합니다. 잠시만 기다려 주세요!

jquery를 사용하여 div의 표시 및 숨기기를 제어합니다. 이 작업은 한 문장으로 수행할 수 있습니다. 예:

1.$("#id").show()는 display: block,

로 표현됩니다. $("#id" ).hide()는 display:none;

2.$("#id").toggle()로 표현되며 요소의 표시 상태를 전환합니다. 요소가 표시되면 숨김으로 전환하고, 요소가 숨겨져 있으면 표시로 전환합니다.

3.$("#id").css('display','none');//숨기기

$("#id").css('display','block');//표시

또는

$("#id")[0].style.display='none';

　 display=none은 객체의 숨겨진 검색을 제어합니다

　display=block은 객체의 표시를 제어합니다

4.$ (" #id").css('visibility','hidden');//요소 숨김

$("#id").css('visibility','visible');//요소 표시

CSS visible 속성 요소가 표시되는지 여부를 지정합니다.

visible 요소가 표시됩니다.

hidden요소가 보이지 않습니다.

collapse 테이블 요소에 사용되는 경우 이 값은 행이나 열을 삭제할 수 있지만 테이블 레이아웃에는 영향을 주지 않습니다. 행이나 열이 차지하는 공간을 다른 콘텐츠에 사용할 수 있습니다. 이 값이 다른 요소에 사용되면 "숨김"으로 렌더링됩니다.

inherit 상위 요소의 가시성 속성 값을 상속받습니다.

참고:

display:none 및 visible:hidden은 모두 웹 페이지의 요소를 숨길 수 있습니다. 시각적 효과에는 차이가 없지만 일부 DOM 작업에서는 둘 사이에 차이가 있습니다.

display:none - -- 숨겨진 개체를 위해 예약된 물리적 공간이 없습니다. 즉, 개체가 페이지에서 완전히 사라지고 일반인의 관점에서 보거나 만질 수 없습니다.

visible:hidden--- 웹 페이지에서 개체를 보이지 않게 하지만 웹 페이지에서 개체가 차지하는 공간은 변경되지 않습니다. 즉, 여전히 높이, 너비 등과 같은 속성을 갖습니다. , 볼 수는 없지만 만질 수 있습니다.

//第1种方法 ,给元素设置style属性  
$("#hidediv").css("display", "block");  
//第2种方法 ,给元素换class，来实现隐藏div，前提是换的class样式定义好了隐藏属性  
$("#hidediv").attr("class", "blockclass");  
//第3种方法,通过jquery的css方法，设置div隐藏  
$("#blockdiv").css("display", "none");  
  
$("#hidediv").show();//显示div    
$("#blockdiv").hide();//隐藏div

추천 학습: "jquery 비디오 튜토리얼"

위 내용은 Jquery에서 요소를 숨기는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!