동일한 클래스의 다른 스타일에 영향을 주지 않고 jQuery를 사용하여 CSS 클래스 규칙의 글꼴 크기를 어떻게 수정할 수 있습니까?

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

질문:

jQuery를 사용하여 CSS 클래스 규칙을 즉석에서 조정하고 싶습니다. 제공된 클래스(.classname) 내의 다른 스타일에 영향을 주지 않고 글꼴 크기를 조정합니다. 또한 업데이트된 클래스 변경 사항을 파일에 저장하는 방법을 찾고 있습니다.

답변:

jQuery로 CSS 클래스 규칙 수정

안타깝게도, jQuery 자체에는 CSS 클래스를 직접 수정하기 위한 기본 지원이 부족합니다. 그러나 JavaScript를 사용하는 대체 접근 방식은 다음과 같습니다.

<code class="javascript">// Select the CSS rule for the target class (`classname`)
const rule = document.styleSheets[0].cssRules[0];

// Adjust font size specifically
rule.style.fontSize = "16px";</code>

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

수정된 CSS 규칙을 파일에 저장하려면 다음 단계를 따르세요. :

1. 다음 스크립트를 사용하여 CSS 선언을 스크랩합니다.

   <code class="javascript">// Function to extract CSS declarations from a rule
   function getDeclarations(rule) {
     let declarations = [];
     for (let i = 0; i < rule.cssText.length; i++) {
    declarations.push(rule.cssText[i].trim());
     }
     return declarations;
   }
   
   // Save declarations to a variable
   const declarations = getDeclarations(rule);</code>

2. 수집된 선언에서 CSS 문자열을 구성합니다.

   <code class="javascript">// Create a CSS string
   const cssString = declarations.join(";\n");</code>

3. Ajax POST 요청을 시작하여 CSS 문자열을 서버 측 파일에 저장합니다.

추가 참고 사항:

• 제공되는 JavaScript 솔루션은 Internet Explorer 6을 포함한 주요 브라우저에서 지원됩니다.
• 파일 저장 프로세스에는 서버측 처리가 필요하지만 여기서는 다루지 않습니다.
• CSS 사용을 고려하세요. CSS 변수를 더 쉽게 조작할 수 있는 전처리기(예: Less, Sass).

위 내용은 동일한 클래스의 다른 스타일에 영향을 주지 않고 jQuery를 사용하여 CSS 클래스 규칙의 글꼴 크기를 어떻게 수정할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!