> 웹 프론트엔드 > JS 튜토리얼 > JavaScript에서 CSS 규칙의 내용을 어떻게 검색할 수 있나요?

JavaScript에서 CSS 규칙의 내용을 어떻게 검색할 수 있나요?

Susan Sarandon
풀어 주다: 2024-12-11 02:39:09
원래의
282명이 탐색했습니다.

How Can I Retrieve the Contents of CSS Rules in JavaScript?

CSS 규칙의 내용 가져오기

CSS 규칙의 값에 액세스하는 방법을 아는 것은 동적 스타일 지정이나 프레젠테이션 조작에 유용할 수 있습니다. 당신의 요소.

인라인 스타일 형식으로 CSS 규칙의 모든 내용을 포함하는 문자열을 반환하려면 다음 접근 방식을 사용할 수 있습니다.

function getStyle(className) {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">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;
로그인 후 복사

}

alert(getStyle('.test'));

이 코드에서:

  • getStyle은 CSS 클래스 이름을 입력으로 사용하고 해당 클래스의 규칙 값이 포함된 문자열을 반환하는 함수입니다. class.
  • classes는 문서의 첫 번째 스타일시트에 있는 모든 CSS 규칙의 배열입니다.
  • 루프는 규칙을 반복하면서 selectorText 속성( 규칙)은 지정된 클래스 이름과 일치합니다.
  • 일치하는 항목이 발견되면 cssText 속성(규칙의 인라인 표현이 포함됨)이 cssText 변수.
  • 마지막으로 cssText 변수가 반환되어 경고 상자에 표시됩니다.

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

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