DOM 요소에 적용된 스타일 값을 검색하는 방법

DOM 요소의 표시 속성 검색

웹 페이지에서 표시 속성은 요소의 가시성과 레이아웃을 결정합니다. .style.* 속성은 HTML에 정의된 스타일 속성에 대한 액세스를 제공하고 getComputeStyle() 메서드는 적용된 스타일 값을 표시합니다.

.style.* 속성 이해

.style.display와 같은 .style.* 속성은 요소에 할당된 해당 스타일 속성의 값을 반환합니다. 그러나 이러한 속성은 브라우저에 적용된 스타일을 반영하지 않습니다. 예를 들어, 다음 코드 조각에서

<code class="html"><style type="text/css">
  a { display: none; }
</style>

<script type="text/javascript">
  var a = (document.getElementById('a')).style;
  alert(a.display); // Displays an empty string
</script></code>

"a" 요소의 .style.display 속성은 HTML에 정의된 표시 속성이 없기 때문에 빈 문자열을 반환합니다. 요소가 CSS 스타일 시트에 없음을 표시하도록 시각적으로 설정되어 있으므로 이는 오해의 소지가 있습니다.

적용된 스타일 값에 getComputeStyle() 사용

적용된 스타일을 검색하려면 값을 사용하려면 getCompulatedStyle() 메서드를 사용하세요. 예:

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

이 시나리오에서 getComputeStyle()은 "a" 요소에 적용된 실제 CSS 값을 반환합니다.

결론

스타일 속성을 다룰 때 스타일 속성(.style.을 통해 액세스)과 적용된 스타일 값(getCompulatedStyle()을 통해 액세스) 간의 차이점에 유의하세요. .style. 속성은 HTML에 정의된 스타일 속성만 반영하므로 요소의 시각적 모양을 정확하게 나타내지 못할 수 있습니다. 이를 위해서는 항상 getCompulatedStyle()을 사용하여 적용된 스타일 값을 얻으세요.

위 내용은 DOM 요소에 적용된 스타일 값을 검색하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!