순수 JavaScript를 사용하여 요소에 적용 가능한 모든 CSS 규칙을 검색하려면 어떻게 해야 합니까?

JavaScript를 사용하여 요소에 적용할 수 있는 CSS 규칙 찾기

웹 개발에서는 특정 클래스나 ID의 CSS 요소에 액세스하는 것이 일반적인 작업입니다. 종종 도구와 API의 도움을 받습니다. 그러나 브라우저는 요소의 모양을 결정하기 위해 다양한 소스에서 적용 가능한 모든 CSS 규칙을 컴파일합니다. 브라우저 플러그인에 의존하지 않고 순수 JavaScript에서 이 기능을 어떻게 복제할 수 있습니까?

계산된 CSS 규칙 식별

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

<style type="text/css">
    p { color :red; }
    #description { font-size: 20px; }
</style>

<p>

이 경우 p#description 요소는 빨간색과 글꼴 크기라는 두 가지 CSS 규칙을 상속합니다. 20px. 목표는 이러한 규칙의 출처를 확인하는 것입니다.

JavaScript 구현

이를 달성하기 위해 다음 JavaScript 기능을 사용할 수 있습니다.

function css(el) {
    var sheets = document.styleSheets, ret = [];
    el.matches = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector || el.oMatchesSelector;
    for (var i in sheets) {
        var rules = sheets[i].rules || sheets[i].cssRules;
        for (var r in rules) {
            if (el.matches(rules[r].selectorText)) {
                ret.push(rules[r].cssText);
            }
        }
    }
    return ret;
}

사용법

var rules = css(document.getElementById('elementId'));

규칙 변수 이제 선택한 요소에 적용 가능한 모든 CSS 규칙의 배열이 포함됩니다.

참고:

이 함수는 Element.matches() 메서드를 사용합니다. 이전 브라우저에 대한 브라우저 간 호환성 폴리필. 그러나 추가 브라우저 플러그인 없이 CSS 규칙을 식별하는 빠르고 효율적인 방법을 제공합니다.

위 내용은 순수 JavaScript를 사용하여 요소에 적용 가능한 모든 CSS 규칙을 검색하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!