순수 JavaScript를 사용하여 특정 요소에 적용된 모든 CSS 규칙을 어떻게 검색할 수 있습니까?

요소와 관련된 모든 CSS 규칙 가져오기

브라우저 렌더링에는 CSS 규칙을 컴파일하고 이를 특정 요소에 적용하는 작업이 포함됩니다. Firebug와 같은 브라우저 도구에 표시된 것처럼 이 계층적 프로세스는 요소의 최종 모양으로 정점에 이릅니다. 그러나 추가 플러그인 없이 이러한 계산된 CSS 규칙에 액세스하려면 순수 JavaScript의 맞춤형 솔루션이 필요합니다.

해결책:

요소에 대한 CSS 규칙을 검색하려면 JavaScript의 DOM API 및 CSSRule 객체. 다음 코드 조각은 브라우저 간 호환 솔루션을 제공합니다.

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 규칙이 포함된 배열을 반환합니다. 특정 요소에 대한 규칙을 검색하려면 css(document.getElementById('elementId'))를 호출하면 됩니다.

예:

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

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

<p>

전화 css(document.getElementById('description'))은 다음 배열을 반환합니다.

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

이 배열은 요소에 적용되는 두 가지 CSS 규칙을 나열하여 최종 모양에 대한 명확한 이해를 제공합니다.

위 내용은 순수 JavaScript를 사용하여 특정 요소에 적용된 모든 CSS 규칙을 어떻게 검색할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!