Изменить правила CSS с помощью JavaScript или jQuery?

Question

Можно ли изменить/изменить существующие правила css с помощью javascript или jquery? Например, таблица стилей имеет этот класс:

.red { 
    color: red; 
} 

И у меня есть 10 элементов, использующих класс.

То, что я хотел бы сделать, чтобы изменить класс вроде этого:

.red { 
    color: blue; 
} 

Так что это также будет влиять на будущие экземпляры одного и того же класса. (11, 12, 13 и т. Д.).

Answer 1

Я верю, что jQuery .css() - это то, что вы ищете.

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

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

Answer 2

Что вы спрашиваете, мне кажется, как злоупотребление 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 3

Вот как вы изменяете правило CSS с помощью JavaScript.

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 4

Javascript обеспечивает сбор document.styleSheets, который обеспечивает список CSSStyleSheet объектов. Вы можете пройти эту коллекцию, чтобы найти какое-либо конкретное правило css, которое вас интересует, и изменить его правила.

Однако, как упоминалось выше, это, вероятно, не правильный подход к тому, чего вы пытаетесь достичь. Он может быть немного браузером и просто чувствует себя взломанным.

Вы бы лучше иметь 2 отдельные правила

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

Внутри вашей JavaScript сохранить переменную, которая содержит текущий класс по умолчанию для элементов, то есть. current_class = 'синий'. Когда вы создаете элемент просто .addClass (current_class). Если вы хотите изменить все элементы, .toggleClass (current_class, new_class).

Answer 5

Кажется мне, вы могли бы просто сделать это:

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