如何使用 JavaScript 修改全局 CSS 值：综合指南

使用 JavaScript 修改全局 CSS 值

问题概述

操作 CSS 样式时使用 JavaScript 元素时，可能会无意中更改内联样式值，从而覆盖全局 CSS 声明。这可能会导致不一致的行为和不正确的结果。

解决方案

要修改全局 CSS 值，请使用 document.styleSheets API。此 API 提供对 StyleSheetList 的访问，其中包含文档中的所有 CSS 样式表。通过迭代此列表，您可以识别所需的样式表并修改其规则。

实现

要操作给定元素 ID 的全局 CSS 值，请按照以下步骤操作：

1. 获取元素的样式表：使用 document.getElementById(id) 检索 HTML 元素，使用 element.styleSheets 访问其样式表。
2. 识别规则： 使用 for 或 forEach 循环遍历样式表，以查找包含元素样式规则的样式表。
3. 修改规则： 使用 cssRules 或 Rules 属性（取决于浏览器）访问规则数组。然后，通过将其 selectorText 属性与元素的 ID 匹配来查找 CSS 规则。
4. 设置新值： 识别规则后，将其 value 属性设置为所需的 CSS 值。

示例代码

以下代码演示了如何更改 ID 为“container”的元素的背景颜色：

<code class="javascript">// Get the element
const element = document.getElementById('container');

// Iterate through stylesheets
for (let i = 0; i < element.styleSheets.length; i++) {
  // Access the CSS rules
  const cssRules = element.styleSheets[i].cssRules;

  // Find the rule matching the element's ID
  for (let j = 0; j < cssRules.length; j++) {
    if (cssRules[j].selectorText === '#container') {
      // Change the background color
      cssRules[j].style.backgroundColor = 'red';
      break;
    }
  }
}</code>

以上是如何使用 JavaScript 修改全局 CSS 值：综合指南的详细内容。更多信息请关注PHP中文网其他相关文章！