如何使用 JavaScript 直接访问和修改 CSS 声明？

使用 JavaScript 访问和修改 CSS 声明

内联样式提供了一种修改元素外观的简单方法，但它可以覆盖现有的 CSS 规则并扰乱预期的行为。为了避免这种情况，开发人员可以选择直接修改 CSS 声明对象。

CSS 声明对象可以通过文档对象的 styleSheets 属性访问。每个 styleSheet 对象都包含 cssRules（或 Internet Explorer 中的规则）的集合。这些规则表示各自样式表中定义的样式。

要修改 CSS 声明对象，请从样式表的 cssRules 集合中检索相应的规则并访问其样式属性。例如：

<code class="javascript">var sheet = document.styleSheets[0];
var rules = sheet.cssRules || sheet.rules;

rules[0].style.color = 'red';</code>

此代码会将样式表中第一条规则的颜色声明修改为“红色”。

请注意，修改规则的样式属性将覆盖任何现有规则该规则内的声明。要有选择地修改特定属性，请使用以下语法：

<code class="javascript">var sheet = document.styleSheets[0];
var rules = sheet.cssRules || sheet.rules;

rules[0].style['background-color'] = 'blue';</code>

此代码只会更改第一条规则的背景颜色属性。

演示此技术，以下 JSFiddle 展示了如何修改“box”类元素的颜色，而不影响悬停效果：http://jsfiddle.net/8Mnsf/1/

以上是如何使用 JavaScript 直接访问和修改 CSS 声明？的详细内容。更多信息请关注PHP中文网其他相关文章！