如何使用 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 聲明script:

   <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 預處理器（例如 Less、Sass）以更輕鬆地操作 CSS變數。

以上是如何使用 jQuery 修改 CSS 類別規則的字體大小而不影響同一類別中的其他樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！