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

试一试:

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

clientHeight包括高度和垂直填充。

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

scrollHeight包括所包含文档的高度(在滚动的情况下会大于高度)、垂直填充和垂直边框。

一定使用

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

or

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

我把这个作为一个额外的答案，因为我刚刚学到一些重要的东西。

我差点掉进了刚才使用offsetHeight的陷阱。事情是这样的:

我使用了使用调试器的老技巧来“观察”我的元素具有哪些属性 我看到了哪个值在我期望的值附近 它是offsetHeight，所以我用了它。 然后我意识到它不工作与隐藏DIV 我试着在计算maxHeight后隐藏，但看起来笨拙-弄得一团糟。 我搜索了一下——发现了jQuery.height()——并使用了它 发现height()甚至适用于隐藏元素 只是为了好玩，我检查了高度/宽度的jQuery实现

以下只是其中的一部分:

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的方法列表，我建议你看一看。

这就是答案吗?

“如果你需要计算一些东西，但不显示它，将元素设置为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。有了问题元素，我通常在基数中得到NaN，在偏移和滚动高度中得到零。然后我尝试了添加DOM解决方案和clientRects，看看它是否在这里工作。

2011年6月29日， 我确实更新了代码，尝试添加到DOM和clientHeight，结果比我预期的要好。

1) clientHeight也是0。

2) Dom给了我一个非常棒的身高。

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

因为添加的元素本质上是流动的，所以当它们被添加到一个空的DOM Temp元素中时，它们将根据该容器的宽度呈现。这有点奇怪，因为它比最终的长度短了30px。

我添加了一些快照来说明高度是如何计算的。

身高差异很明显。我当然可以添加绝对定位和隐藏，但我相信这不会有任何影响。我仍然相信这是行不通的!

(我进一步离题)高度出来(渲染)低于真实渲染高度。这可以通过设置DOM Temp元素的宽度来匹配现有的父元素来解决，理论上可以相当准确地做到这一点。我也不知道把它们移走，再把它们加回到现有的位置会产生什么结果。当它们通过innerHTML技术到达时，我将使用这种不同的方法。

然而，这些都是不必要的。事实上，它像广告宣传的那样工作，并返回正确的高度!!

当我能够让菜单再次可见时，令人惊讶的是，DOM在页面顶部的流体布局中返回了正确的高度(279px)。上面的代码也使用getClientRects返回280px。

下面的快照说明了这一点(在Chrome运行时拍摄)。

现在我不知道为什么这个原型戏法是有效的，但它似乎是。或者，getClientRects也可以。

我怀疑这些特定元素的所有这些问题的原因是使用了innerHTML而不是appendChild，但在这一点上，这纯粹是推测。

如果你已经在使用jQuery，你最好的选择是. outerheight()或.height()，如上所述。

没有jQuery，你可以检查使用的box-sizing和添加各种填充+边框+ clientHeight，或者你可以使用getComputedStyle:

罗马，档案。

H现在是一个字符串，比如" 538.25 px"。

我找不到引用，但我听说getComputedStyle()很昂贵，所以它可能不是你想在每个窗口调用的东西。onscroll事件(但是，也不是jQuery的height())。

它应该只是

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

与jQuery。这将以数字的形式检索换行集中第一项的高度。

尝试使用

.style.height

只有在您首先设置了该属性时才有效。不是很有用!