如何使用 JavaScript 以编程方式访问和更改非内联 CSS 值？

使用 Javascript 更改 CSS 值

访问非内联 CSS 值

在 JavaScript 中，可以使用 document.getElementById('id').style.width 轻松修改内联 CSS 值= 值。但是，在处理样式表中定义的非内联 CSS 值时，此方法会出现问题。使用 JavaScript 检索此类值会返回 Null，从而难以执行某些逻辑运算。

以编程方式修改样式属性

要解决此问题，可以访问 CSS 样式表并以编程方式修改。操作方法如下：

1. 使用 document.styleSheets 检索样式表数组。
2. 通过将 document.styleSheets[styleIndex].href 属性与预期路径进行比较来找到特定样式表。
3. 在 IE 中使用 document.styleSheets[styleIndex].rules 获取 CSS 规则数组或其他浏览器中的 document.styleSheets[styleIndex].cssRules。
4. 通过将其 selectorText 属性与已知选择器（例如 #tId）进行比较来识别所需的规则。

一旦规则被识别后，可以读取和设置其 value 属性。这允许在不更改内联样式的情况下检索和修改 CSS 值。下面的代码演示了这个过程：

var styleIndex = 0; // Index of the stylesheet to modify
var ruleIndex = 1; // Index of the rule to modify
var cssRuleCode = document.all ? 'rules' : 'cssRules'; // Account for IE and FF
var rule = document.styleSheets[styleIndex][cssRuleCode][ruleIndex];
var selector = rule.selectorText; // e.g., '#tId'
var value = rule.value; // Get the current value or set a new value using `rule.value = 'new_value'`

以上是如何使用 JavaScript 以编程方式访问和更改非内联 CSS 值？的详细内容。更多信息请关注PHP中文网其他相关文章！