使用JavaScript获取CSS声明

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

简而言之，只需命名shadow的值（1pt1pt3ptrgba（…），如“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);

因此，算法如下所示：

var defaultShadow=elem.css（“框阴影”）

每隔一段时间做一件事。将另一个阴影添加到默认阴影

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

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

是否有一种方法可以使用JavaScript为相关元素获取在.CSS文件中声明的CSS样式。我还需要元素状态的样式，如“：hover”、“：active”等

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

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

有关更多信息，请参见此

IE示例：

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

Firefox示例：

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

---

已找到这些参考文件。

请使用更多信息进行编辑。不鼓励只编写代码和“试试这个”答案，因为它们不包含可搜索的内容，也不解释为什么有人应该“试试这个”。

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