Динамическое изменение 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);
Примечание. На странице рекомендуется рассмотреть возможность изменения классов элементов вместо изменения вида этих классов.