원래 단위로 CSS 속성 값을 검색하려면 어떻게 해야 합니까?

CSS 속성 값을 원래 단위로 가져오기

요소의 CSS 속성 값을 결정할 때 개발자는 getCompulatedStyle 또는 jQuery의 css()와 같은 메서드에 의존하는 경우가 많습니다. 그러나 이러한 메서드는 값을 픽셀 단위로 반환하므로 값이 원래 다른 단위(예: 백분율, em 또는 px)로 설정된 경우 문제가 될 수 있습니다. 이로 인해 질문이 제기됩니다. 설정된 단위에 관계없이 CSS 속성 값을 원래 단위로 어떻게 얻을 수 있습니까?

요소 스타일 및 순서의 중요성

핵심은 다음에 있습니다. 요소 스타일과 CSS 선택기 순서를 고려합니다. 요소 스타일은 우선순위가 가장 높으므로 요소의 스타일 속성에 값이 명시적으로 설정되어 있는지 확인하는 것부터 시작합니다. 그렇다면 값과 우선순위를 검색합니다.

다음으로 getMatchedCSSRules를 사용하여 일치하는 CSS 규칙을 검사합니다. 이러한 규칙은 우선순위(가장 높은 마지막)에 따라 정렬되며 우리는 이를 거꾸로 반복합니다. 규칙에 null이 아닌 우선순위가 있는 경우 값을 업데이트합니다. 그러나 규칙에 중요한 우선순위가 있는 경우 즉시 값을 반환합니다.

코드 예

다음 HTML 및 CSS를 고려하세요.

<div class="b">div 1</div>
<div>
<p>그리고 다음 JavaScript도 고려하세요. 코드:</p>
<pre class="brush:php;toolbar:false">var d = document.querySelectorAll('div');

for (var i = 0; i <p>이 코드는 다음 너비를 출력합니다. divs:</p><pre class="brush:php;toolbar:false">div 1:  100px
div 2:  50%
div 3:  auto
div 4:  44em

결론

요소 스타일과 일치하는 CSS 규칙의 순서를 모두 고려하여 이 사용자 정의 getMatchedStyle 함수는 CSS 속성 값을 원래 단위로 정확하게 검색합니다. 이 지식은 요소 크기와 치수를 정확하게 관리하는 데 중요합니다.