JavaScript의 요소에 적용 가능한 CSS 규칙을 프로그래밍 방식으로 검색하는 방법은 무엇입니까?

요소에 적용 가능한 CSS 규칙 검색

소개:
웹 브라우저는 다양한 스타일시트의 CSS 스타일을 렌더링할 요소입니다. Firebug와 같은 도구는 이 정보를 노출하여 각 요소에 대한 CSS 상속 트리를 표시합니다. 이 기사에서는 브라우저 플러그인 없이 순수 JavaScript로 이 기능을 복제하는 방법을 설명합니다.

해결책:
요소에 적용되는 CSS 규칙을 결정하려면:

1. 문서의 스타일 시트 얻기: 문서와 관련된 스타일 시트 배열에 액세스합니다.
2. CSS 규칙 반복: 각 스타일 시트와 해당 규칙을 반복합니다. .
3. 적용성 확인: match() 메서드를 사용하여 요소가 CSS 규칙의 선택기 텍스트와 일치하는지 확인합니다.
4. 적용 가능한 규칙 캡처: 일치하는 항목이 발견되면 CSS 텍스트를 배열로 푸시합니다.

다음은 이 솔루션을 구현하는 샘플 JavaScript 코드입니다.

function css(el) {
    var sheets = document.styleSheets;
    var 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('elementId')). 적용된 CSS 규칙을 문자열로 포함하는 배열을 반환합니다.

예:

이 샘플 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로.

위 내용은 JavaScript의 요소에 적용 가능한 CSS 규칙을 프로그래밍 방식으로 검색하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!