순수 JavaScript를 사용하여 CSS 상속 트리를 검사하려면 어떻게 해야 합니까?

JavaScript를 사용하여 CSS 상속 트리 검사

id가 "description"인 p 요소가 있는 웹 페이지를 생각해 보세요.

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

<p>

브라우저는 이 요소를 렌더링할 때 적용 가능한 모든 CSS 규칙을 단일 상속 트리로 병합합니다. 브라우저 플러그인에 의존하지 않고 순수 JavaScript로 이를 어떻게 복제할 수 있습니까?

해결책:

요소에 적용된 CSS 규칙을 검사하기 위해 다음을 수행할 수 있습니다. 문서의 스타일시트와 요소의 선택기와 일치합니다. 이를 달성하기 위한 크로스 브라우저 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(document.getElementById('description'))를 호출하면 요소에 적용된 CSS 규칙 문자열 배열이 반환됩니다. 이 경우에는 다음과 같습니다.

["p { color :red; }", "#description { font-size: 20px; }"]

이 기능을 사용하면 개발자가 계산된 CSS 규칙의 소스에 액세스하여 웹 페이지 디버깅 및 이해를 돕습니다. 스타일링.

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