如何使用 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中文网其他相关文章！