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

17

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

Вот пример:

.red{
    color:red;
}

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

.red{
    color:purple;
}

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

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

    
задан Simon 16.08.2012 в 17:01
источник

3 ответа

13

Вы используете 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 } ');

Рабочий образец

    
ответ дан thecodeparadox 16.08.2012 в 17:02
источник
  • Будет ли это удовлетворять «Но я хочу иметь это правило для каждого элемента, кроме добавления в futur путем добавления»? –  Grim... 16.08.2012 в 17:04
  • Вам нужна запятая после «myrule», я думаю. Неужели последняя часть делает ненужным .css ()? –  Grim... 16.08.2012 в 17:08
  • Хм, это не работает (по крайней мере, в Chrome). Вы должны добавить .red {color: purple; }, а не только цвет: фиолетовый; к тегам стиля. Это также остановит работу append () (если вы не добавили вторую .red-декларацию, я думаю). –  Grim... 16.08.2012 в 17:13
  • Нерабочий образец: jsfiddle.net/Grimdotdotdot/2dLBy –  Grim... 16.08.2012 в 17:50
  • Он отлично работает !! Еще раз спасибо !! Это именно то, что мне нужно, спасибо вам снова! Извините за этот поздний ответ, но я не был перед моим компьютером! Еще раз спасибо! –  Simon 16.08.2012 в 21:29
Показать остальные комментарии
21

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

$("head").append('<style>.red { color: purple }</style>');
    
ответ дан Grim... 16.08.2012 в 17:03
источник
  • Выполнение этого, как правило, плохой идеи IMO, но я буду поддерживать, поскольку он делает именно то, что хочет OP, добавляет стиль ко всем элементам, включая будущие, добавленные в DOM позднее. –  adeneo 16.08.2012 в 17:47
  • Интересно - почему вы думаете, что это плохая идея, потому что ее сложно отменить? –  Grim... 16.08.2012 в 17:50
  • @Grim ... его также трудно отследить: в зависимости от сложности JS может быть очень сложно отладить, почему что-то не появляется так, как вы ожидаете. В некоторых случаях это полезно, но я пришел к этому вопросу, потому что мне нужно было знать, как это сделать для сценария Greasemonkey ... –  Kip 24.04.2014 в 15:55
5

Если вы хотите добавить правило, а не стиль стилей непосредственно, вы можете использовать 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);

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

    
ответ дан leewz 02.09.2015 в 09:18
источник