实现多个CSS属性的问题

Question

我想使用jQuery更改元素的css。

$('p').css({
    padding-left : '6px',
    border-left : '5px solid #555'
});

它不起作用。

然而，当我使用

时

$('p').css('padding-left','6px');
$('p').css('border-left','5px'); 

它有效......

我在这里做错了什么？

由于

Answer 1

您必须将属性（样式属性）包装在引号（''或“”）中。

这是因为它们包含短划线（ - ）。

Working demo

$('p').css({
    'padding-left' : '6px',
    'border-left' : '5px solid #555'
});

Answer 2

最好以这种方式使用：

CHECK THIS OUT IN FIDDLE HERE

$('p').css({
    paddingLeft : '6px',
    borderLeft : '5px solid #555'
});

在css中我们使用连字符-分隔全部小写并用""单引号或双引号括起来。这种方式在js / jQuery中：

    'padding-left' : '6px',
    'border-left' : '5px solid #555'
//--^-----------^----------------------here 

在js中，所有css属性都可以通过camelCase访问：

    paddingLeft : '6px',
    borderLeft : '5px solid #555'
//--^^^^^^^^^^------------------------this way

Answer 3

因为你没有在第一段代码中用引号定义它们。

$('p').css({
    'padding-left' : '6px',
    'border-left' : '5px solid #555'
});

应该工作。

Answer 4

缺少引号

$('p').css({
    'padding-left' : '6px',
    'border-left' : '5px solid #555'
});

Answer 5

试

$('p').css({
    'padding-left':'6px',
    'border-left':'5px solid #555'
});