使用JavaScript获取CSS声明

Question

我正在写一个复杂的视觉效果，它改变了“框影”属性。

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

我有一个样式表和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. var defaultShadow = elem.css("box-shadow");
2. 在setInterval中做一些事情。向默认阴影中添加另一个阴影

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

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

是否有一种方法可以获得在.css文件中声明的CSS样式，用于有问题的元素，使用JavaScript。我还需要元素状态的样式，如“：悬浮”、“：活动”等等。

Answer 1

是否有一种方法可以获得在.css文件中声明的CSS样式，用于有问题的元素，使用JavaScript。我还需要元素状态的样式，如“悬停”、“活动”等。

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

有关更多信息，请参见此博客帖子。

IE实例：

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

Firefox示例：

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

参考文档，这些是被发现的。

Answer 2

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