JavaScript를 사용하여 DIV 요소를 효과적으로 숨기고 숨기기를 해제하려면 어떻게 해야 합니까?

JavaScript로 'div' 요소 숨기기 및 숨기기 해제

두 개의 'div' 요소의 가시성을 전환하려는 시나리오를 고려해 보겠습니다. 웹 페이지에서. 요소 표시 및 숨기기를 트리거하는 버튼이 있습니다. 그러나 첫 번째 함수만 대상 'div'를 숨기고 두 번째 함수는 숨기지 않는 문제가 발생했습니다.

JavaScript의 요소 가시성 제어

숨기거나 JavaScript로 요소를 표시하면 해당 스타일 속성을 조작할 수 있습니다. 디스플레이 제어에는 두 가지 옵션이 있습니다.

• 디스플레이: 요소의 가시성을 설정합니다.

  • '없음': 숨기기 the element.
  • 'block': 요소를 독립형으로 표시합니다. block.
  • 'inline': 주변 텍스트에 맞춰 요소를 표시합니다.
  • 'inline-block': 'inline'과 비슷하지만 요소의 너비와 높이를 지정할 수 있습니다.

• 가시성: 요소의 가시성을 제어합니다. 공간을 유지합니다.

  • 'hidden': 요소를 숨기지만 공간을 유지합니다.
  • 'visible': 요소를 표시합니다.

컬렉션 숨기기 요소

한 번에 여러 요소를 숨기려면 함수를 사용하여 요소를 반복하고 표시 속성을 '없음'으로 설정할 수 있습니다.

function hide (elements) {
  elements = elements.length ? elements : [elements];
  for (var index = 0; index < elements.length; index++) {
    elements[index].style.display = 'none';
  }
}

사용 예:

hide(document.querySelectorAll('.target')); // Hides all elements with the 'target' class.
hide(document.querySelector('.target')); // Hides the first element with the 'target' class.
hide(document.getElementById('target')); // Hides the element with the ID 'target'.

이러한 기술을 활용하면 효과적으로 표시하거나 숨길 수 있습니다. 웹페이지의 'div' 요소 및 기타 HTML 요소.

위 내용은 JavaScript를 사용하여 DIV 요소를 효과적으로 숨기고 숨기기를 해제하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!