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() — Diodeus - James MacFarlane
– Diodeus - James MacFarlane, Commented Mar 28, 2013 at 14:00
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. — Mark Pieszak - Trilon.io
– Mark Pieszak - Trilon.io, Commented Mar 28, 2013 at 14:01

Peter Rasmussen · Accepted Answer · 2013-03-28 14:14:31Z

6

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

This is because they contain a dash (-).

Working demo

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

edited Mar 28, 2013 at 14:14

answered Mar 28, 2013 at 13:59

Peter Rasmussen

17k8 gold badges50 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

David Van Staden Over a year ago

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...

dgvid Over a year ago

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."

Peter Rasmussen Over a year ago

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 :)

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

Better to use this way:

CHECK THIS OUT IN FIDDLE HERE

$('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

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Mar 28, 2013 at 14:03

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Comments

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

2

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, 2013 at 14:00

Diabolic

4582 silver badges9 bronze badges

Comments

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

1

Just missing quotes

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

answered Mar 28, 2013 at 13:59

Huangism

16.5k7 gold badges51 silver badges75 bronze badges

Comments

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

1

try

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

answered Mar 28, 2013 at 14:01

IT ppl

2,6472 gold badges41 silver badges57 bronze badges

Collectives™ on Stack Overflow

Issues with implementing multiple CSS properties

5 Answers 5

3 Comments

CHECK THIS OUT IN FIDDLE HERE

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related