JavaScript 숨기기 / 표시 요소

1. style.visibility속성을 사용하여 HTML 요소 숨기기 / 표시
2. style.display속성을 사용하여 HTML 요소 숨기기 / 표시
3. jQuery의hide()/show()를 사용하여 HTML 요소 숨기기 / 표시
4. jQuery toggle()을 사용하여 HTML 요소 숨기기 / 표시
5. addClass()/removeClass()를 사용하여 HTML 요소 숨기기 / 표시

우리는 종종 요소 표시와 숨기기 사이를 전환하고 싶은 상황에 직면합니다. 이 튜토리얼에서는 JavaScript에서 요소를 숨기거나 표시하는 방법을 소개합니다.

style.visibility속성을 사용하여 HTML 요소 숨기기 / 표시

style.visibility속성을 hidden으로 설정하면 대상 요소가 숨겨 지지만 흐름에서 제거되지는 않습니다. 따라서 대상 요소가 렌더링되지만 표시되지는 않습니다. 레이아웃에 영향을주지 않으며 다른 요소가 자연 공간을 차지할 수 있습니다. 속성을 다시visible로 설정하여 대상 요소를 다시 표시 할 수 있습니다.

document.getElementById(id).style.visibility = 'visible';  // show
document.getElementById(id).style.visibility = 'hidden';   // hide

style.display속성을 사용하여 HTML 요소 숨기기 / 표시

style.display속성을none으로 설정하면 페이지의 정상적인 흐름에서 대상 요소가 제거되고 나머지 요소가 해당 공간을 차지할 수 있습니다. 대상 요소는 페이지에 표시되지 않지만 DOM을 통해 여전히 상호 작용할 수 있습니다. 모든 하위 항목이 영향을받으며 상위 요소처럼 표시되지 않습니다. 속성을block으로 설정하여 대상 요소를 다시 표시 할 수 있습니다. block은 요소에 여백을 추가하기 때문에display를''로 설정하는 것이 좋습니다.

document.getElementById(id).style.display = 'none';  // hide
document.getElementById(id).style.display = '';      // show

jQuery의hide()/show()를 사용하여 HTML 요소 숨기기 / 표시

show()메소드는display:none또는 jQuery hide()메소드를 통해 숨겨진 요소를 표시하는 데 도움이됩니다. 가시성이 숨겨진 요소는 표시 할 수 없습니다. 다음 세 가지 매개 변수를 허용합니다.

1. Speed: 페이딩 효과의 지연 속도를 지정합니다.
2. Easing: 표시 / 숨김 상태로 전환하는 데 사용되는 여유 기능을 지정합니다. swing및linear의 두 가지 다른 값을 사용합니다.
3. Callback : show()메소드 실행이 완료된 후 실행되는 함수입니다.

마찬가지로 jQuery hide()메서드는 선택한 요소를 숨기는 데 도움이됩니다. show()와 동일한3매개 변수를 사용합니다.

$('#element').hide();  // hide
$('#element').show();  // show

jQuery toggle()을 사용하여 HTML 요소 숨기기 / 표시

jQuery toggle()은hide()와show()메소드 사이를 전환 할 수있는 특수 메소드입니다. 숨겨진 요소를 표시하고 보이는 요소를 숨기는 데 도움이됩니다. 또한 jQuery의hide()및show()메소드와 동일한 세 개의 매개 변수를 사용합니다. 또한 숨기기 / 표시 효과를 전환하는 데 도움이되는 4 번째 매개 변수 디스플레이를 사용합니다. false로 설정하면 요소를 숨기는 부울 매개 변수입니다.

$('div.d1').toggle(500, swing);  // toggle hide and show

addClass()/removeClass()를 사용하여 HTML 요소 숨기기 / 표시

addClass()함수는 요소의 기존 클래스 목록에 클래스를 추가하는 데 도움이되고removeClass()는이를 제거하는 데 도움이됩니다. 이러한 함수를 사용하여 요소를 숨기는 사용자 정의 클래스를 작성한 다음 클래스 목록에서 추가 및 제거하여 숨기기 / 표시를 전환 할 수 있습니다.

.hidden{display: none} $('div').addClass('hidden');  // hide
$('div').removeClass('hidden');                      // show