如何使用 JavaScript 修改 CSS 样式表值？

使用 JavaScript 访问和修改 CSS 样式

使用 JavaScript 修改 CSS 样式时，定位正确的元素和值至关重要。内联 CSS 值可以轻松更改，但获取和修改样式表中定义的值可能具有挑战性。

访问 CSS 样式表值

要访问给定的 CSS 样式表值id，按照以下步骤操作：

1. 使用 document.styleSheets 检索所有样式表。
2. 根据其 href 属性确定所需的样式表。
3. 获取规则数组（例如，大多数浏览器中的 cssRules、IE 中的规则）。
4. 使用其选择器文本属性标识特定规则。

修改 CSS 样式表值

一旦确定了所需的规则，您就可以修改它：

1. 设置selectorText属性以更改选择器（例如，从#tId到#newId）。
2. 设置value 属性来更改 CSS 值（例如，从 width: 50% 更改为 width: 30%）。

示例

在提供的场景中：

<style>
   #tId {
      width: 50%;
   }
</style>

<div id="tId"></div>

您可以使用以下 JavaScript 来修改样式表中的宽度属性：

var rule = document.styleSheets[0].cssRules[0];
rule.selectorText = "#tId";
rule.value = "width: 30%";

这会将样式表规则更新为：

#tId {
      width: 30%;
   }

请注意，内联样式仍然优先于样式表值。要覆盖内联样式，请使用 document.getElementById('id').style.width = value.

以上是如何使用 JavaScript 修改 CSS 样式表值？的详细内容。更多信息请关注PHP中文网其他相关文章！