CODEWITHSUNDEEP
jquerycss
Andy Hin
Andy Hin

Reputation: 31893

jQuery CSS property names inconsistent

Why is the property name different for:

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

and

$(elem).css('marginTop')

? Shouldn't it be:

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

instead?

Upvotes: 3

Views: 489

Answers (2)

James Allardice
James Allardice

Reputation: 165971

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

Upvotes: 4

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

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.

Upvotes: 1

Related Questions