초기 정의된 대로 CSS 속성 값 가져오기(Percent/EM/PX)
웹 개발에서는 원본을 검색하는 것이 중요할 수 있습니다. 후속 수정에 관계없이 요소의 CSS 속성 값입니다. 계산된 값은 대신 px 값을 제공하는 경우가 많기 때문에 백분율 또는 em과 같은 단위로 작업할 때 특히 그렇습니다.
문제 정의
getCompulatedStyle과 같은 함수를 사용할 때 문제가 발생합니다. 또는 jQuery의 css()를 사용하여 현재 CSS 속성 값을 얻습니다. 이러한 메소드는 처음에 다른 단위로 설정된 경우에도 픽셀 단위로 값을 반환합니다.
해결책: getMatchedStyle
이 문제를 해결하려면 getMatchedStyle이라는 사용자 정의 JavaScript 함수를 사용할 수 있습니다. 고용. 이 기능은 요소의 CSS 규칙을 반복하여 요소 스타일과 중요한 규칙의 우선순위를 지정합니다. 그런 다음 CSS 규칙에 정의된 대로 초기 값을 반환합니다.
코드 예
function getMatchedStyle(elem, property) { // Check for element-defined property (highest priority) var val = elem.style.getPropertyValue(property); // If important, return immediately if (elem.style.getPropertyPriority(property)) return val; // Get matched CSS rules in descending priority order var rules = getMatchedCSSRules(elem); // Iterate through rules backwards to ensure correct priority for (var i = rules.length; i--;) { var r = rules[i]; // Check if rule is important var important = r.style.getPropertyPriority(property); // Update value only if not set or if important rule encountered if (val == null || important) { val = r.style.getPropertyValue(property); // Return if important rule encountered if (important) break; } } return val; }
사용 예
다음 HTML 및 CSS를 고려하십시오.
<div class="b">first</div> <div>
다음 JavaScript 코드는 div의 초기 너비를 검색하는 데 사용됩니다.
var d = document.querySelectorAll('div'); for (var i = 0; i < d.length; ++i) { console.log("div " + (i + 1) + ": " + getMatchedStyle(d[i], 'width')); }
Output
div 1: 100px div 2: 50%
getMatchedStyle 함수를 사용하면 CSS 속성 값을 정확하게 검색할 수 있습니다. 후속 스타일에 의해 수정되었는지 여부에 관계없이 원래 정의된 대로 유지됩니다.
위 내용은 처음에 정의된 CSS 속성 값(퍼센트 및 EM 단위 포함)을 검색하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!