DOM 요소의 표시 속성을 정확하게 검색하는 방법 및 .style 속성이 빈 문자열을 반환할 수 있는 이유

DOM 요소의 표시 속성 검색: 실제 값 공개

제공된 HTML 코드는 서로 다른 표시를 가진 단락과 앵커를 소개합니다. 스타일. 그러나 스타일 속성을 통해 이러한 스타일을 검색하면 예기치 않은 빈 문자열이 생성되는 것 같습니다. 왜 그런가요? 그리고 어떻게 표시 속성을 정확하게 검색할 수 있나요?

빈 문자열의 수수께끼

초기 혼란은 .style.* 때문에 발생합니다. 속성은 적용된 스타일이 아닌 스타일 속성에 직접 매핑됩니다. 즉, 기본적으로 인라인 스타일 선언을 확인하고 있으며 계산된 스타일이 항상 반영되지 않을 수도 있습니다.

해결책: getCompulatedStyle

실제 적용된 스타일을 얻으려면 , 상속된 속성을 포함하여 getComputeStyle 메서드를 사용해야 합니다. 이 메소드는 DOM 요소를 인수로 사용하고 계산된 스타일 값이 포함된 CSSStyleDeclaration 객체를 반환합니다.

제공된 코드는 다음과 같이 getCompulatedStyle을 사용하도록 수정할 수 있습니다.

<code class="javascript">var a = (document.getElementById('a'));
alert(getComputedStyle(a).display);
var p = (document.getElementById('p'));
alert(getComputedStyle(p).display);
p.style.display = 'none';
alert(getComputedStyle(p).display);</code>

이제 첫 번째 경고는 앵커 태그에 대해 "없음"을 표시하고, 두 번째 경고는 단락 요소에 대해 "차단"을 표시하며, 세 번째 경고는 의도적인 표시 설정 후에 "없음"을 표시합니다. 이는 요소의 계산된 표시 스타일을 정확하게 반영합니다.

대체 접근 방식: 클래스 전환

표시 속성에 의존하는 대신 클래스 이름을 사용하여 전환하는 것을 고려할 수 있습니다. 요소의 가시성. 프레젠테이션을 로직에서 분리하면 코드를 단순화하고 스타일 관련 문제가 발생할 가능성을 줄일 수 있습니다.

위 내용은 DOM 요소의 표시 속성을 정확하게 검색하는 방법 및 .style 속성이 빈 문자열을 반환할 수 있는 이유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!