使用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中获得的。

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

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

Answer 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找到了这些。

Answer 2

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