50

With jQuery.css() I've been told I can use the following two functions for the same results:

$(".element").css("marginLeft") = "200px";

$(".element").css("margin-left") = "200px";

I've always used marginLeft as this is what is used in the documentation:

http://api.jquery.com/css/

Shorthand CSS properties (e.g. margin, background, border) are not supported. For example, if you want to retrieve the rendered margin, use: $(elem).css('marginTop') and $(elem).css('marginRight'), and so on.

Why has jQuery allowed for marginLeft as well as margin-left? It seems pointless and uses more resources to be converted to the CSS margin-left?

Curtis
  • 101,612
  • 66
  • 270
  • 352
  • 1
    As an aside [`.css`](http://jsperf.com/cowbell-css-styles/2) is slow as hell compared to classes. Basically `.style` and `.css` are the devil. – Raynos Oct 26 '11 at 14:17

6 Answers6

52

jQuery's underlying code passes these strings to the DOM, which allows you to specify the CSS property name or the DOM property name in a very similar way:

element.style.marginLeft = "10px";

is equivalent to:

element.style["margin-left"] = "10px";

Why has jQuery allowed for marginLeft as well as margin-left? It seems pointless and uses more resources to be converted to the CSS margin-left?

jQuery's not really doing anything special. It may alter or proxy some strings that you pass to .css(), but in reality there was no work put in from the jQuery team to allow either string to be passed. There's no extra resources used because the DOM does the work.

Andy E
  • 338,112
  • 86
  • 474
  • 445
40

I think it is so it can keep consistency with the available options used when settings multiple css styles in one function call through the use of an object, for example...

$(".element").css( { marginLeft : "200px", marginRight : "200px" } );

as you can see the property are not specified as strings. JQuery also supports using string if you still wanted to use the dash, or for properties that perhaps cannot be set without the dash, so the following still works...

$(".element").css( { "margin-left" : "200px", "margin-right" : "200px" } );

without the quotes here, the javascript would not parse correctly as property names cannot have a dash in them.

EDIT: It would appear that JQuery is not actually making the distinction itsleft, instead it is just passing the property specified for the DOM to care about, most likely with style[propertyName];

musefan
  • 47,875
  • 21
  • 135
  • 185
  • 3
    "engine doesn't need to convert the string." lol what? I think you need to learn how properties work. – Raynos Oct 26 '11 at 12:34
  • a property is merely a valid identifier, `marginLeft: value` and `"marginLeft": value` are the same thing. – Raynos Oct 26 '11 at 13:40
  • 1
    @Raynos, yes but as some point along the way something has to parse 1 of them (or maybe both) to identify what it is actually wanting to do. Now, from reading the other answer I concede that JQuery is possible using a string version of both when calling the DOM style[] property anyway so in this case there would be no difference as the DOM would still be working with a string either way (or maybe JQuery passes them differently - I cannot find any resources to prove either way) – musefan Oct 26 '11 at 13:43
  • Sorry, at which point would it _not_ be working with a string? – Raynos Oct 26 '11 at 13:45
  • In my first example marginLeft is not a string, in the second "margin-left" is a string. Maybe this is the way javascript handles define objects, but surely it has to parse the "margin-left" string to create a property from it? Or am I wrong? – musefan Oct 26 '11 at 13:58
  • 2
    no, again that's not how properties on an object work, they are both strings. `marginLeft: "200px"` is just sugar for `"marginLeft": "200px"`. And the parsing is done when it loads the file, not at run-time. Arguably it's ever so marginally slower (couple of nano seconds?) but that's an epic micro optimisation. – Raynos Oct 26 '11 at 14:01
  • 3
    @musefan Have you considdered that your code is 95% slower than Andy E's? [Proven fact](http://jsperf.com/cowbell-css-styles). – Incognito Oct 26 '11 at 14:06
  • 1
    @Raynos: OK, so now we get somewhere. I didnt realise that the parsing is done at runtime. Thanks for the info ;) – musefan Oct 26 '11 at 14:10
  • @musefan Yeah, I'm using a browser with a faster javaScript engine than you are. Check out the results pane for ie6-9,ff4, and chrome. Point is, jQuery slows down the web needlessly because it runs a bunch of string manipulation and lookup tables... and all you needed was two lines of code. – Incognito Oct 26 '11 at 14:22
  • @Incognito: Looks like I should switch back down to stable Chrome – musefan Oct 26 '11 at 14:30
  • @musefan If you'd like to. Opera generally kills all the other guys at DOM and other features like parseInt, give it a whirl if you're looking for the fastest right now. – Incognito Oct 26 '11 at 14:37
  • $(".element").css({"margin-left":"240px"}); is worked for me(removing the extra spaces ).Thank you @musefan. – Shekkar Apr 20 '15 at 09:51
10

Late to answer, but no-one has specified that css property with dash won't work in object declaration in jquery:

.css({margin-left:'200px'});//won't work
.css({marginLeft:'200px'});//works

So, do not forget to use quotes if you prefer to use dash style property in jquery code.

.css({'margin-left':'200px'});//works
Bhojendra Rauniyar
  • 83,432
  • 35
  • 168
  • 231
6

when is marginLeft being used:

$("div").css({
    marginLeft:'12px',
    backgroundPosition:'10px -10px',
    minHeight: '40px'
});

As you can see, attributes that has a hyphen on it are converted to camelcased format. Using the margin-left from the previous code block above would make JavaScript bonkers because it will treat the hyphen as an operation for subtraction.

when is margin-left used:

$("div").css("margin-left","12px").css("background-position","10px -10px").css("min-height","40px");

Theoretically, both code blocks will do the same thing. We can allow hyphens on the second block because it is a string value while compared to the first block, it is somewhat an object.
Now that should make sense.

Karvoin Gabiloux
  • 61
  • 1
4

jQuery is simply supporting the way CSS is written.

Also, it ensures that no matter how a browser returns a value, it will be understood

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

Jason Gennaro
  • 34,535
  • 8
  • 65
  • 86
  • 2
    jQuery's taking credit for something it didn't do here, the underlying DOM handles the two different strings. – Andy E Oct 26 '11 at 12:18
-1

Hi i tried this it is working.

$("#change_align").css({"margin-top":"-39px","margin-right":"0px","margin-bottom":"0px","margin-left":"719px"});
Luke
  • 77
  • 8