Динамическое изменение CSS-правил в JavaScript или jQuery

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

Вот пример:

.red{
    color:red;
}

Итак, идея состоит в том, чтобы что-то сделать в JavaScript, и HTML знает, что теперь color - это другой цвет:

.red{
    color:purple;
}

Но я хочу иметь это правило для каждого элемента, который я добавляю в будущем, путем добавления. Поэтому, если я добавлю span с классом CSS .red, текст должен быть фиолетовым и не красным.

Надеюсь, я дал понять.

Ответ 1

Вы используете jQuery .css().

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

Для нескольких правил:

$('.red').css({
    'color': 'purple',
    'font-size': '20px'
});

Когда вы добавляете динамический элемент в будущем в DOM путем добавления, просто дайте этим элементам несколько class или id и напишите правила CSS, как указано выше, после их добавления, и они будут применяться для всех динамически созданных элементов.

Рабочий пример

Примечание

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

Но если вам нужно что-то вроде динамических правил, добавьте метод:

$('head').append(
  $('<style/>', {
    id: 'mystyle',
    html: '.red {color: purple }'
  })
);

И для будущего использования:

$('#mystyle').append(' .someother { color: green; font-size: 13px } ');

Рабочий пример

Ответ 2

Вы можете вводить декларации стиля в DOM.

$("head").append('<style>.red { color: purple }</style>');

Ответ 3

Если вы хотите добавить правило, а не стиль стилей непосредственно, вы можете использовать CSSStyleSheet.insertRule(). Он принимает два параметра: правило как строку и где вставить правило.

Пример из приведенной выше ссылки:

// push a new rule onto the top of my stylesheet
myStyle.insertRule("#blanc { color: white }", 0);

В этом случае myStyle является членом .sheet элемента style.

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

var myStyle = document.styleSheets[1]; // Must not be a linked sheet.
myStyle.insertRule("#blanc { color: white }", 0);

Примечание. На странице рекомендуется рассмотреть возможность изменения классов элементов вместо изменения вида этих классов.