HTML:
<div id="that" style="margin-left: 10px; border-width: 2px"></div>
jQuery:
// alerts "10px 0px" which is strange, isn't it?
alert($('#that').css('margin-left') + ' ' + $('#that').css('border-width'));
jsFiddle: http://jsfiddle.net/vZpAv/
Why does jQuery behave like that? Aren't it supposed to get the 2px? Firstly, I thought it was because of the dash in the CSS property (as css('borderWidth') works properly) but as you can see it does work well for margin-left.
border-width is used for setting the border width of each border on an element, but you can't assume that each border has the same width. As a result, you need to run something like:
$('#that').css("borderTopWidth");
But this will still return 0px, because you can't set a border width without setting a colour and style.
use Fire fox and fire bug and try to use
Console.log(); instead of alerts
You can use following piece of code:
alert($('div').css('margin-left') + ' ' + $.style($('div')[0], 'borderWidth'));
