Issues with implementing multiple CSS properties

Question

I want to change the css of an element using jQuery.

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

It does not work.

However, when i use

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

it works...

What am I doing wrong here?

Thanks

Nothing, attribute names need to be quoted when using .css()
By not having the quotes, it is interpreting padding-left as a variable, just wrap them in single quotes and you'll be all set.

Xeano · Accepted Answer · 2013-03-28 14:14:31Z

up vote 6 down vote accepted

You have to wrap the properties (style attribute) in qoutes ('' or "").

This is because they contain a dash (-).

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

edited Mar 28 at 14:14

answered Mar 28 at 13:59

Xeano
1,96621128

	sweet stuff, thank you. you see, I referred to this post: stackoverflow.com/questions/447197/… and there they do not have width and height in quotes''...I guess it is because of the hyphen... – David Van Staden Mar 28 at 14:07
	Right. From api.jquery.com/css: "Also, jQuery can equally interpret the CSS and DOM formatting of multiple-word properties. ... Notice that with the DOM notation, quotation marks around the property names are optional, but with CSS notation they're required due to the hyphen in the name." – dgvid Mar 28 at 14:08
	Correct, if you just wanted to add padding (does not contain a dash) instead of padding-left, you could avoid the qoutes. Some however consider it best practice to always wrap in qoutes. That way you always avoid these kind of situations :) – Xeano Mar 28 at 14:09
	yip, thanks guys – David Van Staden Mar 28 at 15:59

Huangism · Answer 2 · 2013-03-28 13:59:59Z

up vote 1 down vote

Just missing quotes

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

answered Mar 28 at 13:59

Huangism
2,8891323

Diabolic · Answer 3 · 2013-03-28 14:00:10Z

up vote 2 down vote

Because you're not defining them within quotes in the first piece of code.

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

Should work.

answered Mar 28 at 14:00

Diabolic
43019

IT ppl · Answer 4 · 2013-03-28 14:01:57Z

up vote 1 down vote

try

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

answered Mar 28 at 14:01

IT ppl
1,037831

Jai · Answer 5 · 2013-03-28 14:15:40Z

Better to use this way:

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

in css we use with hyphen - separated all lowercase and enclosed in "" single or double quotes. This way in js/jQuery:

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

While in js all the css properties are accessible in camelCase this way:

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

5 Answers