DOM 요소의 `display` 속성에 어떻게 정확하게 액세스할 수 있나요?

DOM 요소의 표시 속성에 정확하게 액세스

DOM 요소의 표시 속성을 검색하는 것은 간단해 보이지만 예상치 못한 결과가 발생할 수 있습니다. 다음 예를 고려하십시오.

var a = (document.getElementById('a')).style;
alert(a.display);

이 경고는 예상되는 "없음" 값 대신 빈 문자열을 표시할 수 있습니다. 왜 이런 일이 발생하는 걸까요?

CSS 속성 값과 적용된 스타일의 차이가 문제입니다.

CSS 속성 값과 적용된 스타일

.display를 포함한 .style.* 속성은 적용된 스타일이 아닌 CSS 속성 값에 매핑됩니다. 적용된 스타일은 CSS 계단식 결과를 반영하며 속성 값과 다를 수 있습니다.

주어진 예에서 요소 "a"의 표시 속성은 CSS 속성 스타일에서 "none"으로 설정됩니다.

a {
  display: none;
}

단, 외부 스타일시트나 동적 특성에 따라 적용되는 스타일이 다를 수 있습니다.

getCompulatedStyle 사용

적용된 스타일을 올바르게 검색하려면 getCompulatedStyle() 메서드를 사용하세요. 요소를 인수로 사용하고 계산된 CSS 스타일이 포함된 CSSStyleDeclaration 개체를 반환합니다.

var a = (document.getElementById('a'));
alert(getComputedStyle(a).display);  // Displays "none" as expected

대체 접근 방식: 클래스 토글

대안으로 다음을 사용하는 것을 고려하세요. 요소의 가시성을 전환하는 CSS 클래스입니다. 이 접근 방식은 프레젠테이션을 로직에서 분리하고 CSS 속성을 직접 조작할 필요를 방지합니다.

.hidden {
  display: none;
}

var p = document.getElementById('p');
p.classList.toggle('hidden'); // Toggles the display property

getCompulatedStyle 또는 클래스 토글을 사용하면 DOM 요소의 표시 속성에 정확하게 액세스하고 제어할 수 있습니다.

위 내용은 DOM 요소의 `display` 속성에 어떻게 정확하게 액세스할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!