jQuery를 사용하여 CSS 클래스 규칙을 실시간으로 동적으로 변경하려면 어떻게 해야 합니까?

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

쿼리에는 두 가지 측면이 포함됩니다.

1. 실시간 클래스 규칙 수정

jQuery만으로는 CSS 클래스 규칙을 동적으로 변경할 수 없습니다. 그러나 문서 개체의 styleSheets 속성을 활용하면 CSS 규칙에 직접 액세스할 수 있습니다.

코드:

<code class="javascript">document.getElementById("button").onclick = function() {
    var ss = document.styleSheets;

    for (var i = 0; i < ss.length; i++) {
        var rules = ss[i].cssRules;
        for (var j = 0; j < rules.length; j++) {
            if (rules[j].selectorText === ".classname") {
                rules[j].style.fontSize = "20px";
            }
        }
    }
};</code>

2. 클래스 변경 사항을 파일에 저장

클래스 변경 사항을 파일에 저장하려면 CSS 규칙을 추출하고 Ajax 요청을 통해 서버로 보내야 합니다. 서버 측 구현에는 수정된 규칙으로 파일을 생성하거나 업데이트하는 작업이 포함됩니다.

추가 참고 사항:

• IE6 호환성을 위해서는 document.styleSheets 대신 document.styleSheets.
• CSS 규칙을 얻으려면 스타일시트의 규칙 속성에 액세스하세요. object.
• cssText 속성을 사용하여 CSS 규칙을 설정하거나 수정합니다.

참조:

• document.styleSheets(Mozilla ): https://developer.mozilla.org/en-US/docs/Web/API/Document/styleSheets
• styleSheet 개체(Mozilla): https://developer.mozilla.org/en-US/docs /Web/API/StyleSheet
• CssRule 객체(Mozilla): https://developer.mozilla.org/en-US/docs/Web/API/CSSRule
• document.styleSheets(MSDN): https://docs.microsoft.com/en-us/previous- 버전/windows/internet-explorer/ie-developer/dom/document.stylesheets
• CssRule 개체(MSDN): https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/dom/cssrule

위 내용은 jQuery를 사용하여 CSS 클래스 규칙을 실시간으로 동적으로 변경하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!