首頁 >web前端 >css教學 >如何使用 jQuery 修改 CSS 類別規則的字體大小而不影響同一類別中的其他樣式?

如何使用 jQuery 修改 CSS 類別規則的字體大小而不影響同一類別中的其他樣式?

Linda Hamilton
Linda Hamilton原創
2024-11-03 19:37:03267瀏覽

How can I modify a CSS class rule's font size using jQuery without affecting other styles in the same class?

如何使用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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn