同じクラス内の他のスタイルに影響を与えずに、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 中国語 Web サイトの他の関連記事を参照してください。