TechCodeview

JavaScript에서는 다음을 사용하여 요소를 숨길 수 있습니다. 스타일.디스플레이 또는 스타일.가시성 . 그만큼 시계 JavaScript의 속성은 요소를 숨기는 데에도 사용됩니다. 차이점은 스타일.디스플레이 그리고 스타일.가시성 사용할 때입니다 가시성: 숨김, 태그는 표시되지 않지만 공간이 할당됩니다. 사용 디스플레이: 없음, 태그도 표시되지 않지만 페이지에 할당된 공간이 없습니다.

단어 빠른 액세스 도구 모음

HTML에서는 숨겨진 지정된 요소를 숨기는 속성입니다. 때 숨겨진 HTML의 속성이 true로 설정되거나 요소가 숨겨지거나 값이 거짓, 요소가 표시됩니다.

통사론

다음을 사용하여 요소를 숨기는 일반 구문 스타일.숨김 그리고 스타일.가시성 다음과 같이 주어진다.

사용 스타일.숨김

 document.getElementById('element').style.display = 'none'; 

사용 스타일.가시성

 document.getElementById('element').style.visibility = 'none'; 

이제 요소 숨김을 이해하기 위한 몇 가지 예를 살펴보겠습니다. 자바스크립트 .

실시예 1

이 예에서는 JavaScript를 사용하여 요소를 제거하는 방법을 살펴보겠습니다. 스타일.디스플레이 재산. 여기에는 div 주어진 요소를 클릭하면 숨겨지는 요소 및 단락 요소 HTML 버튼 . 우리는 '클릭 해주세요!' 버튼을 누르면 효과를 볼 수 있습니다.

 style.display <h2> Using both style.visibility and style.display properties </h2> This is the div element. <p> This is a paragraph element. </p> <h3 id="heading"> This is the heading after the paragraph element. </h3> Click me! function fun() { document.getElementById(&apos;div&apos;).style.visibility = &apos;hidden&apos;; document.getElementById(&apos;heading&apos;).style.display = &apos;none&apos;; } 

산출

출력에서 우리는 div 요소(우리가 적용한 스타일.가시성 속성)이 숨겨져 있지만 여전히 공간을 할당하고 있습니다. 하지만 (우리가 적용한 제목은 스타일.디스플레이 속성)이 숨겨져 있으며 공간을 할당하지 않습니다.

버튼을 클릭하면 결과는 다음과 같습니다.