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.