jQuery CSS property names inconsistent

Question

Why is the property name different for:

$(elem).css('padding-top')

and

$(elem).css('marginTop')

? Shouldn't it be:

$(elem).css('margin-top')

instead?

"For example, if you want to retrieve the rendered margin, use: $(elem).css('marginTop') and $(elem).css('marginRight'), and so on." see - api.jquery.com/css — Andy Hin
– Andy Hin, Commented Oct 7, 2012 at 18:11

James Allardice · Accepted Answer · 2012-10-07 18:11:38Z

4

You can use the "camelCase" or "hyphen-separated" form of properties. Both will work. See the jQuery docs for .css():

jQuery can equally interpret the CSS and DOM formatting of multiple-word properties. For example, jQuery understands and returns the correct value for both .css('background-color') and .css('backgroundColor').

So to use your examples, all of the following would work:

$(elem).css('marginTop')
$(elem).css('margin-top')
$(elem).css('paddingTop')
$(elem).css('padding-top')

answered Oct 7, 2012 at 18:11

James Allardice

166k22 gold badges335 silver badges315 bronze badges

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

4 Comments

BoltClock Over a year ago

The statement quoted here is in the paragraph just above what the OP quotes in his comment.

James Allardice Over a year ago

@BoltClock - Haha, so it is. Perfect demonstration of how it always help to read the docs properly.

Andy Hin Over a year ago

Thanks. Must have missed that part :p

mr.soroush Over a year ago

sometimes simple things make terrible problem!

Praveen Kumar Purushothaman · Accepted Answer · 2012-10-07 18:11:26Z

1

There are two things. How CSS sees it and how you can access it using JavaScript. In CSS, it is:

#element {margin-top: ...;}

Whereas in JavaScript, it is:

document.getElementById('element').style.marginTop

And yes, both JavaScript way and CSS way of passing to css() function works.

answered Oct 7, 2012 at 18:11

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

Collectives™ on Stack Overflow

jQuery CSS property names inconsistent

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related