Изменение атрибутов в классе CSS с помощью JQuery

Question

Я не могу понять, как изменить атрибут в классе CSS. Прямо сейчас я добавляю стиль к этому конкретному div, но я хочу, чтобы атрибут в классе CSS был изменен, а не просто переопределен новым атрибутом стиля.

Пример:

.example{background-color:blue} 

<div class="example">example</div> 

Так как я могу затем изменить цвет фона в .example CSS и не только перекрывая его, как это:

<div class="example" style="background-color:blue">example</div> 

Я пробовал много вещей, но я не могу понять это. Я пробовал .attr() и .css(), но я что-то упускаю.

Answer 1

Вы не можете изменить фактический CSS класса (ну можно, но это очень трудно и против практики) - но вы можете изменить его за все, что применяется к этому классу в настоящее время:

$('.example').css('background-color', 'blue'); 

Однако вы можете повторно применять этот CSS каждый раз, когда генерируется новый элемент вашего типа. Например, после вызова сценария AJAX, который извлекает данные из другого файла:

$('#blah').load('script.php', function() { 
    $('.example').css('background-color', 'blue'); 
}); 

Вы также можете иметь интервал, который повторно применяется на все элементы для вас, но производительность мудрого это не рекомендуется:

setInterval(function() { 
    $('.example').css('background-color', 'blue'); 
}, 100); 

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

Answer 2

Что вы хотите, это невозможно, но что-то вроде этого может быть лучше.

body.blueTheme .example { background-color: blue; } 
body.redTheme .example { background-color: red; } 

Теперь вместо изменения цвета в обработчике события измените класс тела.

Answer 3

Динамически изменяющиеся таблицы стилей, как правило, являются плохими идеями, если вы не намереваетесь реализовать полное повторное использование.

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

Положите id на <style> элемент, который ссылается на внешний файл CSS:

<link id="dynCss" rel="stylesheet" type="text/css" href="..." /> 

, а затем положить две различные вариации стиля в двух разных файлах CSS.

, а затем вы можете использовать:

document.getElementById('dynCss').href = ... 

или

$('#dynCss).attr('href', ...); 

, который затем нагрузка (и применяются) новые стили в новом URL.