How to convert css margin value to pixels with just plain javascript?

Question

I'm looking for the simplest and cross browser way to convert html element css margin value to absolute pixels. Say for instance the margin is "auto". I can't use any js framework.

Answer 1

You want to use the window.getComputedStyle method:

var style = window.getComputedStyle(element, null);
// style.marginLeft

Here's a working demo: http://jsfiddle.net/VxccZ/

Update

For IE 8 and older (that do not support this method), use the currentStyle property of your element:

var style = element.currentStyle;
// style.marginLeft

To summarize:

var getMarginLeft = function (element) {
  var style;
  if (window.getComputedStyle) { style = window.getComputedStyle(element, null); }
  else { style = element.currentStyle; }

  return style.marginLeft;
};

I'm not 100% sure that currentStyle features a numeric value for margin: auto. You will have to try that yourself. I cannot do that myself on the Mac.