如何获取任何元素的渲染上边距答案

【问题标题】：How to get the rendered top margin of any element如何获取任何元素的渲染上边距
【发布时间】：2012-07-06 06:11:45
【问题描述】：

我正在寻找一种可靠的方法来确定浏览器中呈现的任何 DOM 节点的上边距。这应该适用于所有浏览器。我怎样才能做到这一点？（有时，一个元素可能在样式表中具有指定的边距，但它实际上可能不会由浏览器呈现，例如，如果它具有 display:inline;（参见 Margin top in inline element）。我正在寻找实际呈现的边距。因此，使用getComputedStyle() 将不起作用）

【问题讨论】：

实际重新渲染的边距，所以如果元素有显示内联，你是想让js返回边距0还是css中元素设置的边距？对不起，我只是困惑，需要一点澄清
他希望它返回 0。

标签： javascript html css margin

【解决方案1】：

好的，下面的方法有效吗？

检查元素是否内联显示，如果是，则上边距为 0

如果不是，则获取上边距

【讨论】：

@user730569 可能需要一些测试，但理论上它应该可以工作
我唯一的问题是，您还需要检查其他样式吗？
@user730569 你很快就会知道的 :)

【解决方案2】：

可能有一种方法可以使用 JQuery 来做到这一点。如果不是你想要的，我想你得到了我想要的，也许它可以帮助你找到一些东西。

function getRenderedTopMargin(id){
   var prevElementWidth;
   var elementOffset = $('#'+id).offset();
   var prevElementOffset = $('#'+id).prev().offset();
   if ($('#'+id).css("display") == 'inline' || $('#'+id).prev().css("display") == 'inline'){
       prevElementWidth = 0;
   }else{
       prevElementWidth = $('#'+id).prev().width();
   }
   return elementOffset.top - prevElementOffset.top - prevElementWidth;
}

【讨论】：