지정된 단위로 CSS 속성 값 검색
웹 개발에서는 원래 정의된 대로 CSS 속성 값을 검색하는 것이 필수적일 수 있습니다. , 지정된 단위를 유지합니다. getCompulatedStyle 및 jQuery의 css() 메서드는 픽셀 단위로 값을 제공하지만 원시 CSS 값을 얻는 것이 중요한 시나리오가 있습니다. 프레임워크에 의존하지 않고 Google Chrome에서 이를 달성할 수 있는 방법은 다음과 같습니다.
Chrome의 Elemental Inspector
Chrome의 Elemental Inspector는 CSS 속성 값을 표시하는 중요한 기능을 제공합니다. 설정된 대로 의도한 값에 대한 시각적 단서를 제공합니다. 이는 Chrome에 프로그래밍 방식으로 이 정보를 검색할 수 있는 기능이 있음을 의미합니다.
getMatchedStyle 함수
코드에서 이를 달성하기 위해 getMatchedCSSRules() 메서드를 사용하여 일치하는 규칙을 얻습니다. , 그런 다음 우선순위의 역순으로 반복합니다. 외부 규칙보다 요소 스타일을 우선시하고 중요한 속성을 확인합니다. getMatchedStyle 함수는 다음과 같습니다.
function getMatchedStyle(elem, property){ // Element style has highest priority var val = elem.style.getPropertyValue(property); // Stop if important if(elem.style.getPropertyPriority(property)) return val; // Get matched rules var rules = getMatchedCSSRules(elem); // Iterate rules backwards, prioritizing highest priority for(var i = rules.length; i --> 0;){ var r = rules[i]; var important = r.style.getPropertyPriority(property); // Reset if more important or not yet set if(val == null || important){ val = r.style.getPropertyValue(property); // Stop if important if(important) break; } } return val; }
예
다음 HTML 및 CSS를 고려하세요.
<div class="b">div 1</div> <div>
div { width: 100px; } .d3 { width: auto !important; } div#b { width: 80%; } div#c.c { width: 444px; } x, div.a { width: 50%; } .a { width: 75%; }
주어진 코드에서 너비는 다음과 같습니다. 검색됨:
div 1: 100px div 2: 50% div 3: auto div 4: 44em
이는 지정된 단위로 CSS 속성 값을 검색하는 기능을 강조하여 스크립트 기반 스타일 조작 작업에 더 큰 유연성과 정확성을 제공합니다.
위 내용은 JavaScript에서 원래 단위로 CSS 속성 값을 검색하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!