> 웹 프론트엔드 > JS 튜토리얼 > CSS 규칙 값을 추출하여 인라인 스타일로 반환하려면 어떻게 해야 합니까?

CSS 규칙 값을 추출하여 인라인 스타일로 반환하려면 어떻게 해야 합니까?

Linda Hamilton
풀어 주다: 2024-12-11 01:01:09
원래의
167명이 탐색했습니다.

How Can I Extract CSS Rule Values and Return Them as Inline Styles?

CSS 규칙 값 추출

CSS 규칙의 값을 추출하여 인라인 스타일 형식으로 반환하려면 보편적인 접근 방식이 필요합니다. 여기에는 모든 CSS 규칙을 탐색하고 해당 선택기를 기반으로 대상 규칙을 식별하는 작업이 포함됩니다.

다음 CSS를 고려하세요.

1

2

3

4

5

.test {

    width: 80px,

    height: 50px,

    background-color: #808080;

}

로그인 후 복사

아래 코드 스니펫은 "에 대한 값을 추출하는 방법을 보여줍니다. 테스트" 규칙:

1

2

3

4

5

6

7

8

9

10

11

12

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;

}

 

var rules = getStyle('.test');

로그인 후 복사

이제 cssText 변수에는 ".test" 규칙은 인라인 스타일로 선언된 것처럼 보입니다. 이 접근 방식은 다목적이며 내용에 관계없이 모든 CSS 규칙에 사용할 수 있습니다.

위 내용은 CSS 규칙 값을 추출하여 인라인 스타일로 반환하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿