用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