Можно ли применить сокращенное css к элементам с помощью метода jQuery .css ()?

Question

Я пытаюсь применить неизвестные стили к неизвестным селекторам, и может показаться, что сокращение css нельзя применить с помощью метода .css() jQuery. Это правильно? Есть ли обходной путь?

Обратите внимание, что я динамически создаю объект для передачи в .css() и не хочу использовать синтаксис .css('background','#000').

$('#example').css({background:'#000000 url("images/bg.gif") repeat-x scroll 0 0 transparent'});

Код выше не работает. Тем не менее, приведенный ниже код делает.

$('#example').css({background:'#000'});

И это тоже.

$('#example').css({background:'url("images/bg.gif")'});

Но при совместном использовании они естественным образом перезаписывают друг друга. Есть предложения?

Answer 1

background: #000000 url("images/bg.gif") repeat-x scroll 0 0 transparent;

… неверный CSS. Вы указали цвет фона дважды (# 000000 и прозрачный). Это должно работать, если вы используете правильный CSS.

Тем не менее, лучше использовать классы и внешние таблицы стилей.

Answer 2

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

Это дает дополнительное преимущество сохранения вашего кода jQueryдо читабельного и управляемого уровня.

Таким образом, вместо записи:

$('#example').css({background:'url("images/bg.gif")'});

Вы можете выбрать более простое:

$('#example').addClass('myClass1');