使用 JavaScript 获取 CSS 声明答案

【问题标题】：Get CSS declarations with JavaScript使用 JavaScript 获取 CSS 声明
【发布时间】：2011-07-08 23:52:49
【问题描述】：

我正在编写一个复杂的视觉效果，它会改变“box-shadow”属性。

简而言之，只需将阴影的值命名为 (1pt 1pt 3pt rgba(...))，例如“shadow”。

我有一个样式表和有问题的 HTML 元素。

元素有，比如说，为正常状态定义的“shadow1”值，为悬停状态定义的“shadow2”：

.elem {
    box-shadow: #333 1pt 1pt 3pt; /* shadow1 */
 }
.elem:hover {
    box-shadow: #666 3pt 3pt 5pt; /* shadow2 */
 }

我的脚本将它自己的阴影添加到现有的阴影中。所以：

box-shadow: shadow1, shadow2

这很容易实现。我只需要使用 jQuery 进行以下操作：

var defaultShadow = elem.css("box-shadow");
elem.css("box-shadow", defaultShadow + ", " + anotherShadow);

所以，算法如下：

问题出现了，当元素悬停时，效果脚本正在运行。在这种情况下，效果已经在使用在步骤 1 中获得的“defaultShadow”。

这更难，因为脚本中声明的阴影出现在“样式”属性中，并且所有使用外部 CSS 声明的规则都将被覆盖。

有没有办法使用 JavaScript 为相关元素获取在 .css 文件中声明的 CSS 样式。我还需要元素状态的样式，例如 ":hover"、":active" 等。

【问题讨论】：

【解决方案1】：

有没有办法获取 CSS 样式，在 .css 文件中声明，用于元素有问题，使用JavaScript。我需要还有元素状态的样式，比如“悬停”、“活动”等。

您应该能够使用 javascript 修改 cssRules 对象来创建自己的规则，而不是依赖内联样式。

有关更多信息，请参阅此blog post。

IE 示例：

document.styleSheets[0].addRule("p .myclass", "font-size: 120%");

Firefox 示例：

document.styleSheets[0].insertRule("p{font-size: 20px;}", 0);

参考doc这些都找到了。

【讨论】：

【解决方案2】：

document.getElementById("id").className = 'arrow_box

【讨论】：