用JavaScript获取CSS声明

Question

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

让我们简单地说一下，只需命名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. var defaultShadow = elem.css("box-shadow");
2. 做一下的setInterval。添加另一个阴影到默认的一个

问题出现时，当元素被徘徊，影响脚本运行。在这种情况下，效果已经与在步骤1中获得的“defaultShadow”一起工作。

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

有没有一种方法可以使用JavaScript来获取CSS文件中声明的CSS样式，用于有问题的元素。我还需要样式元素的状态，比如“：徘徊”，“：激活”等

Answer 1

有没有办法让CSS样式，在.css文件中声明 ，对问题元 ，使用JavaScript。我需要 也样式元素的状态， 像“盘旋”，“活动”等

你应该能够修改与JavaScript中的cssRules对象来创建自己的规则，而不是依靠内嵌样式的。

查看此blog post了解更多信息。 IE的

示例：

用于Firefox

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

实施例：

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

参考doc这些发现。

Answer 2

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