logo

JavaScript 숨기기 요소

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 요소(우리가 적용한 스타일.가시성 속성)이 숨겨져 있지만 여전히 공간을 할당하고 있습니다. 하지만 (우리가 적용한 제목은 스타일.디스플레이 속성)이 숨겨져 있으며 공간을 할당하지 않습니다.

JavaScript 숨기기 요소

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

JavaScript 숨기기 요소