如何使用 Javascript 动态更改样式表中定义的 CSS 值？

使用 Javascript 更改 CSS 值：了解样式表操作

通常，我们发现需要使用 Javascript 动态修改 CSS 值。虽然设置内联 CSS 值很简单，但在样式表中定义 CSS 时可能会带来挑战。

示例：

考虑以下 HTML 代码：

<code class="html"><div id="tId" style="width: 10px"></div></code>

以及相应的CSS：

<code class="css">#tId {
  width: 50%;
}</code>

使用Javascript修改内联样式属性将覆盖样式表值，如下所示：

document.getElementById('tId').style.width = "30%";

这会导致：

<code class="html"><div id="tId" style="width: 30%"></div></code>

挑战：

这种方法的问题在于：

• 它只影响内联值。
• 当没有内联样式时，在修改宽度值之前检索它会返回 Null。

解决方案：操作样式表值

要解决这些挑战，我们需要直接在样式表中操作值。实现方法如下：

1. 使用 document.styleSheets 获取样式表数组。
2. 使用 document.styleSheets[styleIndex].href 查找要修改的特定样式表。
3. 使用 document.styleSheets[styleIndex].cssRules（对于大多数浏览器）或 document.styleSheets[styleIndex].rules（对于 IE）获取 CSS 规则数组。
4. 识别 CSS 规则您想通过检查selectorText属性来更改。

以下代码演示了这种方法：

var styleIndex = ...; // Index of the targeted stylesheet
var ruleIndex = ...; // Index of the targeted CSS rule
var cssRuleCode = document.all ? 'rules' : 'cssRules';
var rule = document.styleSheets[styleIndex][cssRuleCode][ruleIndex];
var value = rule.value; // Get the current value
rule.value = ...; // Modify the value

通过实现这种方法，您可以有效地操作样式表中的CSS值，确保更改将全局应用于指定样式的所有元素。

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