jQuery를 사용하여 CSS 클래스 규칙을 동적으로 수정할 수 있나요?

jQuery를 사용하여 CSS 클래스 규칙을 동적으로 변경하는 방법

질문:

• 특정 CSS를 수정하는 방법 인라인 스타일을 추가하지 않고 jQuery를 사용하여 클래스에 대한 규칙을 적용할 수 있습니까?
• 이러한 변경 사항을 파일에 저장할 수 있습니까?

답변:

jQuery는 CSS 규칙을 수정하는 방법을 직접 제공하지 않지만 작업을 수행하는 데는 두 가지 접근 방식이 있습니다.

a. 즉석에서 CSS 규칙 수정:

• JavaScript의 document.styleSheets 속성을 사용하면 스타일시트 규칙에 액세스할 수 있습니다.
• 규칙을 반복하고 관련 규칙을 찾습니다. 대상 클래스.
• rules[j].style 속성을 사용하여 "font-size"와 같은 원하는 CSS 속성을 변경합니다.
• 예:

<code class="javascript">var ss = document.styleSheets;

for (var i = 0; i &lt; ss.length; i++) {
    var rules = ss[i].cssRules || ss[i].rules;

    for (var j = 0; j &lt; rules.length; j++) {
        if (rules[j].selectorText === ".classname") {
            rules[j].style.fontSize = "16px";
        }
    }
}</code>

ㄴ. 스타일 변경 사항을 파일에 저장:

• 이 프로세스에는 서버측 구현이 필요합니다.
• 위에 설명된 대로 document.styleSheets 속성을 사용하여 수정된 CSS 선언을 읽어보세요.
• JavaScript를 사용하여 업데이트된 CSS가 포함된 문자열을 작성합니다.
• CSS 문자열을 페이로드로 사용하여 Ajax POST 요청을 서버에 보냅니다.
• 서버 측에서 CSS를 영구 저장용 파일로 수정했습니다.

참조:

• [document.styleSheets(Mozilla)](https://developer. mozilla.org/en-US/docs/Web/API/Document/styleSheets)
• [CssRule 객체(Mozilla)](https://developer.mozilla.org/en-US/docs/Web/ API/CSSRule)
• [document.styleSheets(MSDN)](https://docs.microsoft.com/en-us/previous-versions/ie8/cc330629(v=vs.85))
• [CssRule 개체(MSDN)](https://docs.microsoft.com/en-us/previous-versions/ie8/cc330627(v=vs.85))

위 내용은 jQuery를 사용하여 CSS 클래스 규칙을 동적으로 수정할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!