使用JavaScript或jQuery修改CSS規則？

Question

是否可以使用javascript或jquery編輯/修改現有的CSS規則？ 例如，樣式表具有此類：

.red {
    color: red;
}

我有10個使用該類的元素。

我想做的是像這樣編輯類：

.red {
    color: blue;
}

這樣它也將影響同一類的將來實例。 （第11、12、13個元素，依此類推）。

Answer 1

這是使用JavaScript更改CSS規則的方式。

 var ss = document.styleSheets; var m = document.getElementById('modifiedRule'); for (i = 0; i < ss.length; i++) { var rules = ss[i]; for (j = 0; j < rules.cssRules.length; j++) { var r = rules.cssRules[j]; if (r.selectorText == ".red") { m.innerHTML = "<br />Old rule: " + r.cssText; r.style.color = "blue"; m.innerHTML += "<br />Modified rule: " + r.cssText; } } } 

 .red { color: red; } 

 <div class="red">Text</div> <div class="red">Text</div> <div class="red">Text</div> <div class="red">Text</div> <div class="red">Text</div> <div class="red">Text</div> <div class="red">Text</div> <div id="modifiedRule"></div> 

Answer 2

Javascript提供了document.stylesheets集合，該集合提供了CSSStyleSheet對象的列表。 您可以遍歷此集合以找到您感興趣的任何特定CSS規則並修改其規則。

但是，正如我之前提到的，這可能不是您要實現的正確方法。 它可能有點依賴瀏覽器，但感覺很笨拙。

您最好有2條單獨的規則

.red { color :red }
.blue { color : blue }

在您的JavaScript中，維護一個變量，該變量保存元素的當前默認類，即。 current_class ='藍色'。 創建元素時，只需添加.addClass（current_class）。 當您想更改所有元素時，.toggleClass（current_class，new_class）。

Answer 3

在我看來，您可以這樣做：

var reds = $('.red');
var index = 1;
reds.each(function(){
    $(this).css('color', index > 10 ? 'blue' : 'red');
    index++;
})

Answer 4

在我看來，您要問的是對CSS的濫用（無論您是否針對特定問題找到了可行的解決方案）。

我會這樣處理：

.red .myElementClass{ /*or perhaps .red>.myElementClass*/
    color:red;
}
.blue .myElementClass{ /*or perhaps .blue>.myElementClass*/
    color:blue;
}

---

<div id="outer" class="red">
    <div class="myElementClass">foo</div>
    <div class="myElementClass">foo</div>
    <div class="myElementClass">foo</div>
    <div class="myElementClass">foo</div>
    <div class="myElementClass">foo</div>
    <div class="myElementClass">foo</div>
</div>

現在，您可以根據需要添加任意數量，並更改其所有顏色，只需將div#outer的類交換為blue 。

Answer 5

我相信jQuery .css（）是您要找的東西。

$('.red').css('color', 'blue');

http://api.jquery.com/css/