What is the difference between JQuery MarginRight and CSS margin-right used in Javascript?

Question

What is the difference between JQuery marginRight and using CSS margin-right property in Javascript?

With marginRight I can do things like this...

$("button").click(function () {
      var div = $("div");
      div.animate({ marginRight: '4em', opacity: '0.4' }, "slow");
});

Some manipulations I can do with either...

$(".element").css("marginRight") = "4em";

$(".element").css("margin-right") = "4em";

Why has jQuery allowed style manipulation like marginRight as well as margin-right? Doesn't it use more resources to converted to the CSS margin-right from jQuery marginRight?

How do you decide when which usage is appropriate?

Answer 1

Both are the same, jQuery understands both formats. From the docs:

Also, 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" ).

These two syntax's to access these css properties already exist outside jQuery. For example:

In CSS:

#elm {margin-right: value;}

In vanilla JS:

document.getElementById('elm').style.marginRight = value;

Supporting both syntax's would be required to keep both camps happy and to maintain existing paradigms.

As for speed I would suggest [although I haven't done tests] that the camel cased version would be quicker because that's how they would be setting/getting these values internally.

@jack-pattishall-jr made a jsperf -> http://jsperf.com/camelcase-vs-hyphen