CSS 규칙의 전체 콘텐츠를 프로그래밍 방식으로 문자열로 추출하려면 어떻게 해야 합니까?

CSS 규칙 값 추출 이해

프런트 엔드 개발 영역에서 CSS 규칙을 프로그래밍 방식으로 조작하는 것은 귀중한 기술입니다. 이 기사에서는 CSS 규칙의 전체 내용을 문자열로 추출하는 특정 과제에 대해 자세히 설명합니다. 목표는 규칙에 포함된 특정 스타일 속성을 명시적으로 알지 않고도 이를 달성하는 것입니다.

시작하려면 다음 문제 시나리오를 고려하십시오.

문자열 검색을 목표로 하는 시나리오가 발생합니다. 인라인 스타일에서 찾을 수 있는 형식을 복제하여 CSS 규칙의 전체 콘텐츠로 구성됩니다. 이 작업을 수행하려면 특정 규칙에 존재하는 특정 속성에 관계없이 이를 수행할 수 있는 능력이 필요합니다.

다음 CSS가 제공되었다고 가정합니다.

.test {
    width: 80px;
    height: 50px;
    background-color: #808080;
}

지금까지 다음을 구현했을 수 있습니다. 다음 코드:

function getStyle(className) {
    var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
    for (var x = 0; x < classes.length; x++) {
        if (classes[x].selectorText == className) {
            // Here's where you intend to gather style information but are unsure how.
        }
    }
}
getStyle(".test");

이 퍼즐을 해결하는 열쇠는 스타일 시트와 규칙의 cssText 속성을 활용하는 데 있습니다. 코드를 향상시킬 수 있는 방법은 다음과 같습니다.

function getStyle(className) {
    var cssText = "";
    var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
    for (var x = 0; x < classes.length; x++) {
        if (classes[x].selectorText == className) {
            cssText += classes[x].cssText || classes[x].style.cssText;
        }
    }
    return cssText;
}

이 세련된 버전의 getStyle 함수는 cssText 속성을 사용하여 지정된 className과 관련된 전체 스타일 선언 세트를 수집합니다. 그런 다음 결과 문자열인 cssText를 애플리케이션에서 필요에 따라 사용할 수 있습니다.

해결 방법을 설명하기 위해 결과를 경고로 출력해 보겠습니다.

alert(getStyle(".test"));

이렇게 하면 인라인- .test 클래스의 CSS 규칙과 동일한 스타일입니다.

위 내용은 CSS 규칙의 전체 콘텐츠를 프로그래밍 방식으로 문자열로 추출하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!