修改CSS規則的對象用JavaScript

可能重複：
Changing a CSS rule-set from Javascript 修改CSS規則的對象用JavaScript

我想知道是否有任何可能修改CSS樣式表聲明，而不去爲內嵌樣式。

下面是一個簡單的例子：

<style> 
    .box {color:green;} 
    .box:hover {color:blue;} 
</style> 

<div class="box">TEXT</div>

，給出了一個藍色的書面框變綠寫上徘徊。

如果我給的顏色內嵌樣式，懸停行爲將會丟失：

<div class="box" style="color:red;">TEXT</box>

，給出了一個紅色的盒子寫的，不管是什麼。

所以我的問題是，如何訪問和修改css聲明對象而不是用內聯的樣式覆蓋樣式。

謝謝，

2012-11-23 jonBreizh

你可以與你原來的樣式表修改規則的DOM樣式表對象上使用cssRules

。

var sheet = document.styleSheets[0]; 
var rules = sheet.cssRules || sheet.rules; 

rules[0].style.color = 'red';

注意，IE使用rules，而不是cssRules。

2012-11-23 11:51:16

準確地說，我在找什麼。感謝提示。 – jonBreizh

這很好。我想知道我是否可以在不引用其索引位置的情況下定位特定規則集。 – Musixauce3000

@ Musixauce3000你想要通過哪些規則設置？ –

只需定義您的類，並指定/刪除類的HTML元素與JavaScript。

將樣式直接指定給元素具有最高優先級，它將覆蓋所有其他CSS規則。

編輯：您可能希望使用cssText財產

看到這裏的例子cssText property

2012-11-23 11:50:11

爲此，我需要知道的修改風格會是什麼樣提前。如果基礎樣式基於用戶輸入，會怎麼樣？對於你的解決方案，我需要創建一個新的css類，這只是一種不同的方式來查看訪問樣式表問題 – jonBreizh

我更新了答案，檢查cssText屬性 –

感謝但仍然基於javascript/inline造型編輯：快速誤讀csstext是編輯樣式表解決方案的一部分 – jonBreizh

回答