javascript - 如何仅使用纯 JavaScript 将 css 边距值转换为像素？

Question

我正在寻找将 html 元素 css 边距值转换为绝对像素的最简单和跨浏览器的方法。例如说边距是“自动”。我不能使用任何 js 框架。

Answer 1

您想使用以下window.getComputedStyle方法：

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

这是一个工作演示：http: //jsfiddle.net/VxccZ/

更新

对于 IE 8 及更早版本（不支持此方法），请使用currentStyle元素的属性：

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

总结一下：

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

  return style.marginLeft;
};

我不能 100% 确定它currentStyle具有margin: auto. 你将不得不自己尝试。我不能在 Mac 上自己做到这一点。

Answer 2

使用parseInt()功能。

纯 JavaScript / 打字稿：

var elem = document.getElementById("someElement");
var marginTopNumericValue = parseInt(elem.style.marginTop);