如何用简单的javascript将css margin值转换为像素?

hiz5n14c  于 2023-06-07  发布在  Java
关注(0)|答案(2)|浏览(328)

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

nxagd54h

nxagd54h1#

你想使用window.getComputedStyle方法:

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

下面是一个工作demo: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上做不到。

osh3o9ms

osh3o9ms2#

使用parseInt()函数将字符串(如"125px")转换为数字(如125)(尾部的非数字字符将被忽略)
JavaScript / TypeScript示例:

var elem = document.getElementById("someElementId");
var marginTopNumericValue = parseInt(elem.style.marginTop);
document.getElementById("someElementId2") = marginTopNumericValue + "px";

请确保在重新分配时定义您所在的单位!

相关问题