获取边距的绝对宽度（边距问题：auto;）

Posted 2023-03-06

【中文标题】获取边距的绝对宽度（边距问题：auto;）

【英文标题】：Getting absolute width of margins (issue with margin: auto;)

【发布时间】：2014-01-25 11:21:18

【问题描述】：

我正在尝试确定元素边距的used value。我的理解是这应该通过.getComputedStyle() 返回。但是，当使用 margin: auto; 时，FireFox 和 Opera 似乎不会返回正确的值。 Firefox 返回'0px'，Opera 返回'0px'，或者偶尔返回'auto'：

http://jsfiddle.net/8FXbZ/

我知道我可以计算父级的内容宽度和子级的总宽度，并使用它们来计算边距，但我主要看的是父级是 flexbox 的情况：

http://jsfiddle.net/8FXbZ/1/

同样，这些值可能是“逆向工程”的，但这会变得相对复杂（特别是如果 flexbox 允许包装），所以我想知道是否有人有其他想法？

【问题讨论】：

这可能会有所帮助：***.com/questions/12718084/…

@Diodeus 我一定是误解了一些东西，因为我不确定这有什么帮助？我已经知道 jQuery 的 .outerWidth()，所以查看了他们的源代码，但事实证明它在 FF/Opera（至少在 flexbox 中）也给出了错误的边距值。

还有其他方法可以找到边距——jquery 有一些强大的定位函数可以帮助你间接计算它。 Flexbox 在 CSS 中仍然是一个相对较新的概念，其支持可能不如您预期的那么好。为什么你需要边距？

@ProfileTwist 原来的问题已经用另一种方法解决了。现在我只是好奇。

【参考方案1】：

Firefox 中有一个错误：https://bugzilla.mozilla.org/show_bug.cgi?id=381328 返回错误的值。

【讨论】：

@BYossarian 能否请您将此标记为答案，以便人们可以看到正在发生的事情？

【参考方案2】：

我知道这不是您要寻找的答案。鉴于该错误，这是我开始计算左右边距的多边形填充。 FIDDLE

function getMargin(elem) 
  var parent = elem.parentNode,
    prev = elem, 
    next = elem, 
    leftEdge, 
    rightEdge;

  var pos = elem.getBoundingClientRect();
  var parentPos = parent.getBoundingClientRect();
  var parentComputed = window.getComputedStyle(parent);
  while((prev = prev.previousSibling) && !prev.getBoundingClientRect)
  while((next = next.nextSibling) && !next.getBoundingClientRect)
  if(prev)
    leftEdge = prev.getBoundingClientRect().right; //+ getMargin(prev).right
  else 
    leftEdge = parentPos.left + parseInt(parentComputed.getPropertyValue("padding-left")) + parseInt(parentComputed.getPropertyValue("border-left-width"))
  
  if(next)
    rightEdge = next.getBoundingClientRect().left; //- getMargin(next).left;
  else 
    rightEdge = parentPos.right - parseInt(parentComputed.getPropertyValue("padding-right")) - parseInt(parentComputed.getPropertyValue("border-right-width"))

  

  return  
    left: pos.left - leftEdge, 
    right: rightEdge - pos.right 
   

有一个问题，您需要在尝试计算边距的元素之间插入一个空的<span></span> 标签分隔符。它可以是任何空标签（宽度和高度为 0，但可见）。

<div id="parent">
  <div id="inner"></div>
  <span></span>
  <div id="other"></div>
</div>

如果您要删除分隔符跨度标签，并使用递归来计算上一个和下一个元素的边距，您将遇到循环无限循环，因为 left 框需要 right em> 框的 left 边距值和 right 框将需要 left 框的 right 边距值。