JavaScript만 사용하여 어떤 CSS 규칙이 특정 요소에 영향을 미치는지 어떻게 확인할 수 있습니까?

JavaScript의 요소에 영향을 미치는 CSS 규칙 결정

문제:

많은 웹 개발 도구는 다음을 기반으로 요소를 선택하는 기능을 제공합니다. 수업 또는 ID. 그러나 브라우저가 로드하는 원시 CSS 스타일시트를 검사하여 브라우저의 렌더링 프로세스를 더 깊이 파고드는 것이 가능합니다. CSS 규칙은 여러 스타일시트의 요소에 컴파일 및 적용되어 복잡한 상속 트리를 생성합니다.

질문:

어떻게 하면 CSS 규칙에 의존하지 않고 순수 JavaScript에서 이 기능을 복제할 수 있습니까? 추가 브라우저 플러그인?

예:

다음과 같은 특정 요소의 경우:

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

<p></p>

p#description 요소는 다음과 같습니다. 두 가지 CSS 규칙(빨간색 및 글꼴 크기)의 영향을 받습니다. 20px.

답변:

기능:

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

사용:

calling css(document.getElementById('elementId')) 

이 함수는 배열을 반환합니다. 전달된 요소와 일치하는 각 CSS 규칙을 포함합니다.

위 내용은 JavaScript만 사용하여 어떤 CSS 규칙이 특정 요소에 영향을 미치는지 어떻게 확인할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!