순수 JavaScript를 사용하여 CSS 상속 트리를 어떻게 검사할 수 있나요?

JavaScript에서 CSS 상속 트리 검사

웹 개발에서는 CSS 규칙이 웹페이지의 요소에 어떻게 적용되는지 이해하는 것이 중요합니다. 브라우저 도구는 이 상속 트리에 대한 통찰력을 제공하지만 순수 JavaScript를 사용하여 이 분석을 복제할 수 있습니까?

CSS 상속 재현의 필요성

브라우저는 다양한 소스에서 CSS 규칙을 컴파일하여 요소에 적용합니다. 그 결과 각 요소의 모양과 레이아웃을 정의하는 포괄적인 캐스케이드가 생성됩니다. 이 상속 트리를 검사하는 것은 웹페이지의 시각적 동작을 이해하는 데 중요할 수 있습니다.

순수 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;
}

이 함수는 요소를 입력으로 받아들이고 해당 요소에 적용되는 CSS 규칙이 포함된 배열을 반환합니다. 배열의 각 요소는 특정 규칙을 나타냅니다.

사용 예

기능을 시연하려면 다음 HTML 및 CSS를 고려하세요.

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

<p>

이 예에서 ID가 "설명"인 요소에는 빨간색 색상과 20px 글꼴 크기라는 두 가지 CSS 규칙이 적용됩니다. css(document.getElementById('description'))를 호출하면 두 개의 CSS 규칙 문자열이 포함된 배열이 반환됩니다.

추가 분석

각 규칙에 대한 자세한 내용을 보려면 CSSRule을 탐색하세요. 객체 문서화.

위 내용은 순수 JavaScript를 사용하여 CSS 상속 트리를 어떻게 검사할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!