순수 JavaScript의 요소에 영향을 미치는 모든 CSS 규칙을 어떻게 검색할 수 있나요?

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

웹 개발에서 브라우저에 의해 로드된 원시 스타일시트를 검사하면 부분적인 내용만 제공됩니다. 요소에 적용되는 CSS 규칙을 이해합니다. 이는 브라우저가 모든 CSS 규칙을 컴파일하고 상속을 기반으로 요소에 적용하여 스타일시트에서 즉시 명확하지 않은 복잡한 상속 트리가 생성되기 때문입니다.

이 기능을 재현하기 위해 순수한 JavaScript 솔루션을 찾는 개발자의 경우 요소에 영향을 미치는 계산된 CSS 규칙에 대한 자세한 정보는 추가 브라우저 플러그인에 의존하지 않고도 상당한 문제를 야기합니다. 그러나 포괄적인 솔루션은 다음과 같습니다.

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:

HTML

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

<p>

JavaScript

var rules = css(document.getElementById('description'));
console.log(rules); // ['color: red;', 'font-size: 20px;']

이 예에서 함수는 두 개의 일치하는 CSS를 식별합니다. 규칙: 모든

에 대해 빨간색을 지정하는 규칙입니다. 요소 및 ID #description이 있는 요소의 글꼴 크기를 20픽셀로 설정하는 또 다른 방법.

반환된 배열을 사용하면 CSSRule 객체 문서를 참조하여 각 규칙의 세부 정보를 추가로 탐색할 수 있습니다. 이 접근 방식은 추가 플러그인 없이 요소에 적용된 계산된 CSS 규칙을 추출하기 위한 포괄적이고 브라우저 호환 가능한 방법을 제공하므로 개발자는 스타일을 심층적으로 검사하고 디버깅할 수 있습니다.

위 내용은 순수 JavaScript의 요소에 영향을 미치는 모든 CSS 규칙을 어떻게 검색할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!