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

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

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

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

Code:

document.getElementById("button").onclick = function() {
    var ss = document.styleSheets;

    for (var i = 0; i 
2. 클래스 변경 사항을 파일에 저장
클래스 변경 사항을 파일에 저장하려면 CSS 규칙을 추출하고 Ajax 요청을 통해 서버로 보내야 합니다. 서버 측 구현에는 수정된 규칙을 사용하여 파일을 생성하거나 업데이트하는 작업이 포함됩니다.
추가 참고 사항:
IE6 호환성을 위해서는 document.styleSheets 대신 document.styleSheets.
CSS 규칙을 얻으려면 스타일시트 객체의 규칙 속성에 액세스합니다.
 CSS 규칙을 설정하거나 수정하는 cssText 속성입니다.
참조:
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-versions/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