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?

Answer 1

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

Answer 2

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.