Динамическое определение класса с определенным стилем в jQuery

Question

Можно ли динамически определять класс с определенными атрибутами стиля с помощью jQuery, а не устанавливать стиль всех элементов с этим классом?

Я мог бы установить атрибуты класса в конце скрипта, как только все элементы были созданы, но разве это лучший способ? Если бы я определил стиль класса с $('.class').css('property','value'); в начале скрипта, ничего бы не случилось, потому что элементы с классом .class еще не созданы, верно?

Answer 1

Правильный способ сделать это - использовать CSS. Если вы хотите, чтобы элементы с классом "foo" имели набор свойств, поместите эти свойства в файл CSS и свяжите их с соответствующим селектором:

.yourClass {
  font-weight: bold;
  color: green;
}

Если вам нужно сделать это динамически, можно написать блоки CSS с помощью Javascript. Поместите элемент <style> на вашу страницу и присвойте ему значение id:

<style id='dynamicStyle'></style>

Тогда вы можете установить его с помощью jQuery:

$('#dynamicStyle').text(".yourClass { font-weight: bold; }");

Answer 2

Если я вас понимаю, вы хотите добавить стиль к конкретным элементам.

Вам не нужно использовать .css(a,b) для этого. В jQuery есть функция addClass("className");, которая добавит класс к любому элементу, который вы хотите.

$('.originalClass').addClass('addedClass');

Оригинал не перезаписывается.

Это то, что вы хотели?

---

EDIT:

Или вы говорите, что хотите изменить свою таблицу стилей в javascript?

В этом случае существуют правила javascript для изменения свойств таблицы стилей.

Если вы (по какой-то причине) не можете изменить таблицу стилей, то, возможно, вы могли бы просто сохранить свои стили в объекте и применить это.

var stylesToAdd = { background:"orange", border:"1px solid blue" }

И используйте .css(), чтобы применить их.

$('#myElement').css(stylesToAdd);

Answer 3

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

$(document).ready(function() {
 ...
});

или, альтернативно, сокращение

$(function() {
 ...
});

Таким образом, он запускается после загрузки всего HTML.