Вопрос: jQuery CSS не применяется


Есть ли причина, по которой этот CSS не должен работать?

$('.selector').css(
            'background-color', '#74d04c',
            '-webkit-box-shadow','inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a',
            '-moz-box-shadow','inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a',
            'box-shadow','inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a',
            'border','1px solid #4c8932'
            );

Единственный, что отображается, это фоновый цвет.


4


источник


Ответы:


.css принимает либо имя и значение свойства, либо карту. Вы можете сделать это:

$('.selector').css('color','blue');

...или это:

$('.selector').css({'color':'blue', 'left':'100px'});

Проблема в том, что вы смешиваете два подхода. Вместо этого попробуйте вот так:

$('.selector').css({
  'background-color':'#74d04c',
  '-webkit-box-shadow':'inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a',
  etc...
});

11



Я думаю, вы должны добавить разные правила, используя нотацию объектов javascript, а не как огромный массив.

Обновление: Yep - он принимает либо два строковых параметра (ключ, значение), либо карту пар ключ-значение. Источник: http://api.jquery.com/css/


6



Если вы применяете несколько правил, вы должны передать функцию css объекту JS. Подробнее ,

$ («селектор»). css ({«background-color»: «red», «color»: blue});


1



Это должно работать:

$('.selector').css({
    'background-color' : '#74d04c',
        '-webkit-box-shadow' : 'inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a',
        '-moz-box-shadow':'inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a',
        'box-shadow':'inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a',
        'border':'1px solid #4c8932'
    });

демонстрация


1



Исправьте свой синтаксис.

$('.selector').css({'background-color' : '#74d04c',             
                    '-webkit-box-shadow' : 'inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a',             
                    '-moz-box-shadow' : 'inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a',             
                    'box-shadow' : 'inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a',             
                    'border' : '1px solid #4c8932'}); 

1



Если вы хотите установить несколько атрибутов CSS, как это, вам нужно использовать карту :

$('.selector').css({
            'background-color':'#74d04c',
            '-webkit-box-shadow':'inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a',
            '-moz-box-shadow':'inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a',
            'box-shadow':'inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a',
            'border':'1px solid #4c8932'
            });

0