CODEWITHSUNDEEP
jquery
David Van Staden
David Van Staden

Reputation: 1779

Issues with implementing multiple CSS properties

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

Upvotes: 3

Views: 130

Answers (5)

Jai
Jai

Reputation: 74738

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

Upvotes: 3

Peter Rasmussen
Peter Rasmussen

Reputation: 16922

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'
});

Upvotes: 6

IT ppl
IT ppl

Reputation: 2647

try

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

Upvotes: 1

Diabolic
Diabolic

Reputation: 458

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.

Upvotes: 2

Huangism
Huangism

Reputation: 16438

Just missing quotes

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

Upvotes: 1

Related Questions