Динамическое изменение правил 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
источник
21

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

$("head").append('<style>.red { color: purple }</style>');
    
ответ дан Grim... 16.08.2012 в 17:03
источник
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
источник