如何获取元素的渲染高度？

StackOverflow https://stackoverflow.com/questions/526347

  •  22-08-2019
  •  | 
  •  

题

如何获取元素的渲染高度？

假设你有一个 <div> 里面有一些内容的元素。里面的内容将会拉伸 <div>. 。当您没有明确设置高度时，如何获得“渲染”高度。显然，我尝试过： 

var h = document.getElementById('someDiv').style.height;

有这样做的技巧吗？如果有帮助的话我正在使用 jQuery。

有帮助吗？

解决方案

应该仅仅是

$('#someDiv').height();

与jQuery。此检索包裹组为数字的第一个项目的高度。

尝试使用

.style.height

只有当您设置在首位的属性的作品。不是很有用！

其他提示

尝试之一：

var h = document.getElementById('someDiv').clientHeight;
var h = document.getElementById('someDiv').offsetHeight;
var h = document.getElementById('someDiv').scrollHeight;

clientHeight包括高度和垂直填充。

offsetHeight包括高度，垂直填充，和垂直边框。

scrollHeight包括所包含的文档的高度（将不仅仅是高度大于滚动的情况下），垂直填充，和垂直边框。

非JQUERY 的 因为有一帮在这些答案的顶部使用elem.style.height链接... 的

内部高度：结果 https://developer.mozilla.org/en-US/docs /Web/API/Element.clientHeight 

document.getElementById(id_attribute_value).clientHeight;

外部高度：结果 https://developer.mozilla.org/en-US/docs /Web/API/HTMLElement.offsetHeight 

document.getElementById(id_attribute_value).offsetHeight;

或者我最喜欢引用的一个： http://youmightnotneedjquery.com/

可以使用.outerHeight()用于此目的。

这会给你的元素充分呈现高度。此外，您不需要设置元素的任何css-height。对于预防措施，你可以保持它的高度自动，因此它可以被渲染为每个内容的高度。

//if you need height of div excluding margin/padding/border
$('#someDiv').height();

//if you need height of div with padding but without border + margin
$('#someDiv').innerHeight();

// if you need height of div including padding and border
$('#someDiv').outerHeight();

//and at last for including border + margin + padding, can use
$('#someDiv').outerHeight(true);

有关这些功能，你可以去jQuery的网站或一个的 <强>详述这里交 。

它将清除差 .height() / innerHeight() / outerHeight()

之间 
style = window.getComputedStyle(your_element);

然后简单地：style.height

我使用这样的：

document.getElementById('someDiv').getBoundingClientRect().height

当你使用它也可以在虚拟DOM 的。我用它在Vue公司这样的：

this.$refs['some-ref'].getBoundingClientRect().height

肯定使用 

$('#someDiv').height()   // to read it

或

$('#someDiv').height(newHeight)  // to set it

我发布此作为附加的答案，因为有几个重要的事情，我刚刚学到的。

我差点掉进陷阱只是现在使用offsetHeight.这是发生了什么事:

  • 我用的很好的老把戏的使用一个调试器'看什么我的元素的属性有
  • 我看到了哪一个具有价值，约值我很期待
  • 这是offsetHeight-所以我用的。
  • 然后我意识到它没有工作有一个隐藏的DIV
  • 我试图隐藏在计算maxHeight但是，这看上去笨拙了一个烂摊子。
  • 我做了一个搜索发现的！高()-和使用它
  • 找到出身高()工作，甚至隐藏的元素
  • 只是为了好玩我检查延执行的高度/宽度

这里只是一部分：

Math.max(
Math.max(document.body["scroll" + name], document.documentElement["scroll" + name]),
Math.max(document.body["offset" + name], document.documentElement["offset" + name])
)

是啊看起来在这两个滚动和失调。如果失败，它看起来甚至更进一步，考虑到浏览器和css的兼容性问题。换句话说的东西我不关心或希望。

但我没有。谢谢jQuery!

道德的故事：如果jQuery有一种东西可能对一个很好的原因，可能相关的兼容性.

如果你还没读过 jQuery清单的方法 最近我建议你去看一看。

我做了一个简单的代码，甚至不需要jQuery和可能会帮助一些人。 它得到的“ID1”的总高度加载的后和使用它的“ID2” 

function anyName(){
    var varname=document.getElementById('ID1').offsetHeight;
    document.getElementById('ID2').style.height=varname+'px';
}

然后，只需设置体加载它

<body onload='anyName()'>

嗯，我们可以得到元素几何... 

var geometry;
geometry={};
var element=document.getElementById(#ibims);
var rect = element.getBoundingClientRect();
this.geometry.top=rect.top;
this.geometry.right=rect.right;
this.geometry.bottom=rect.bottom;
this.geometry.left=rect.left;
this.geometry.height=this.geometry.bottom-this.geometry.top;
this.geometry.width=this.geometry.right-this.geometry.left;
console.log(this.geometry);

这样如何纯JS？

所以这就是答案？

“如果你需要计算的东西，但没有表现出来，设置元素visibility:hidden和position:absolute，把它添加到DOM树，得到的offsetHeight，并删除它。（这就是原型库做最后一次敌后什么我选中）。“

我有多个元件的同样的问题。没有jQuery的或原型将在网站上使用，但我完全赞成借用该技术是否可行的。由于一些事情，没能成功，随后由什么做了一个例子，我有以下代码：

// Layout Height Get
function fnElementHeightMaxGet(DoScroll, DoBase, elementPassed, elementHeightDefault)
{
    var DoOffset = true;
    if (!elementPassed) { return 0; }
    if (!elementPassed.style) { return 0; }
    var thisHeight = 0;
    var heightBase = parseInt(elementPassed.style.height);
    var heightOffset = parseInt(elementPassed.offsetHeight);
    var heightScroll = parseInt(elementPassed.scrollHeight);
    var heightClient = parseInt(elementPassed.clientHeight);
    var heightNode = 0;
    var heightRects = 0;
    //
    if (DoBase) {
        if (heightBase > thisHeight) { thisHeight = heightBase; }
    }
    if (DoOffset) {
        if (heightOffset > thisHeight) { thisHeight = heightOffset; }
    }
    if (DoScroll) {
        if (heightScroll > thisHeight) { thisHeight = heightScroll; }
    }
    //
    if (thisHeight == 0) { thisHeight = heightClient; }
    //
    if (thisHeight == 0) { 
        // Dom Add:
        // all else failed so use the protype approach...
        var elBodyTempContainer = document.getElementById('BodyTempContainer');
        elBodyTempContainer.appendChild(elementPassed);
        heightNode = elBodyTempContainer.childNodes[0].offsetHeight;
        elBodyTempContainer.removeChild(elementPassed);
        if (heightNode > thisHeight) { thisHeight = heightNode; }
        //
        // Bounding Rect:
        // Or this approach...
        var clientRects = elementPassed.getClientRects();
        heightRects = clientRects.height;
        if (heightRects > thisHeight) { thisHeight = heightRects; }
    }
    //
    // Default height not appropriate here
    // if (thisHeight == 0) { thisHeight = elementHeightDefault; }
    if (thisHeight > 3000) {
        // ERROR
        thisHeight = 3000;
    }
    return thisHeight;
}

这基本上会尝试任何事情，一切只得到一个结果为零。 ClientHeight没有影响。这个问题我的元素通常在基地得到楠的偏移量和滚动高度为零。然后，我尝试添加DOM的解决方案和clientRects，看它是否在这里工作。

2011年6月29日， 我确实更新代码，试图将两者DOM和clientHeight有更好的结果比我预想的。

1）clientHeight也是0。

2）的Dom居然给我的高度也大。

3）ClientRects返回几乎相同的DOM技术的结果。

由于添加的元素本质上是流体，当它们被添加到它们根据该容器的宽度呈现的其他空DOM温度元件。这变得怪异，因为那是30PX短于它最终结束了。

我添加了几个快照来说明如何高度的计算方法不同。 “菜单块通常呈现” “菜单块添加到DOM温度元件”

在高度差是明显的。我当然可以添加绝对定位和隐藏的，但我相信不会有任何效果。我继续确信这是行不通的！

（I离题进一步）的高度出来（绘制）比真实呈现高度低。这可以通过设置DOM元素温度相匹配的现有母公司的宽度来解决，并且可以在理论上相当准确地完成。我也不知道会导致删除它们，并添加他们回来到他们现有的位置是什么。因为它们通过innerHTML的技术到达我将使用这种不同的方法寻找。

<强> *但是* 这些都不是必要的。事实上，它曾作为标榜，并返回正确的高度！

当我能够拿到的菜单再次显示令人惊讶的DOM已在页面（279px）的顶部返回每次流体布局正确的高度。上面的代码还使用了返回280像素getClientRects。

这是在下面的快照所示（从铬一次工作获得。），点击 “在这里输入的图像描述”

现在我有noooooo知道为什么那个原型招的作品，但它似乎。可替代地，getClientRects也有效。

我怀疑这一切麻烦与这些特定元件的原因是使用的innerHTML代替的appendChild的，但是这是在这一点上纯推测。

offsetHeight，通常

如果您需要计算的东西，但没有表现出来，设置元素visibility:hidden和position:absolute，把它添加到DOM树，得到offsetHeight，并删除它。 （这就是原型库做幕后我最后一次检查的背后是什么）。

有时的offsetHeight将返回零，因为你所创建的元素尚未在DOM渲染呢。我写这个函数为这样的情况：

function getHeight(element)
{
    var e = element.cloneNode(true);
    e.style.visibility = "hidden";
    document.body.appendChild(e);
    var height = e.offsetHeight + 0;
    document.body.removeChild(e);
    e.style.visibility = "visible";
    return height;
}

如果您已经在使用 jQuery，那么最好的选择是 .outerHeight() 或者 .height(), ，如前所述。

没有 jQuery，您可以检查正在使用的框大小并添加各种 paddings + borders + clientHeight， 或者 您可以使用 获取计算样式:

var h = getComputedStyle(document.getElementById('someDiv')).height;

h 现在将是一个类似“53.825px”的字符串。

我找不到参考资料，但我想我听说过 getComputedStyle() 可能很贵，所以你可能不想每次都调用它 window.onscroll 事件（但是，jQuery 的也不是 height()).

document.querySelector('.project_list_div').offsetHeight;

使用MooTools的：

$（ 'someDiv'）。的getSize（）。Ý

如果我理解正确你的问题，那么也许会有这样的帮助：

function testDistance(node1, node2) {
    /* get top position of node 1 */
    let n1Pos = node1.offsetTop;
    /* get height of node 1 */
    let n1Height = node1.clientHeight;
    /* get top position of node 2 */
    let n2Pos = node2.offsetTop;
    /* get height of node 2 */
    let n2Height = node2.clientHeight;

    /* add height of both nodes */
    let heightTogether = n1Height + n2Height;
    /* calculate distance from top of node 1 to bottom of node 2 */
    let actualDistance = (n2Pos + n2Height) - n1Pos;

    /* if the distance between top of node 1 and bottom of node 2
       is bigger than their heights combined, than there is something between them */
    if (actualDistance > heightTogether) {
        /* do something here if they are not together */
        console.log('they are not together');
    } else {
        /* do something here if they are together */
        console.log('together');
    } 
}

有你的CSS设置高度明确？如果你还没有，你需要使用offsetHeight;而非height 

var h = document.getElementById('someDiv').style.offsetHeight;
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top