Question

我需要使用javascript确定DOM元素的高度 - 特别是在我的例子中，包含一些文本的div。由于HTML的工作方式，如果元素可见，我只能可靠地执行此操作。通用解决方案是显示元素，获取它的高度，然后隐藏它 - 在单个元素的情况下足够简单。

但是，在一般情况下，所讨论的元素可能是隐藏的其他元素的子元素，从而阻止上述解决方案工作 - 在所讨论的元素上调用jQuery的show()函数实际上并不由于隐藏的父母而导致它被显示，所以你仍然无法获得高度。

如何将元素显示足够长的时间以获得其高度，同时考虑任何需要使其可见的父元素才能使其工作？

用例：我正在尝试编写一些可以应用于任何表元素的代码，这些代码会创建一些其高度应与表头高度匹配的其他元素。我希望保持代码的通用性，无论表位于DOM中的哪个位置，或者当前是否可见，它都能正常工作。另一种解决方案是使用一些javascript，只需在表头大小发生变化时（例如显示时）调整创建元素的大小，但从概念上讲，这似乎效率较低。不过，如果它更容易，我会接受这个答案。

编辑：举一个例子，在记住我要寻找一个与这个特定HTML布局无关的通用解决方案时，请考虑以下HTML：

<div style="display:none; line-height:22px; font-size:18px;">
    ...Some random text or other content...
    <div id="desired_size">
        I want to find the height of this div when visible
    </div>
    ...Possibly some more content/other stuff...
</div>

目标是获得内部div的高度，但我不能这样做，因为它没有显示 - 由于父div被隐藏而被隐藏。如果我所知道的HTML都是desired_size div，那么我该怎样才能让它足够可见以获得高度？当然，这个例子很简单，但我试图概括它。

编辑2：一个建议是克隆元素并将其移动到可见的某个位置。这有效，但需要注意：任何会影响大小的继承CSS属性都会丢失。

编辑3：我正在尝试编写一个代码块，我可以在各种网页中重复使用，而不仅仅是编码到特定的布局。因此，我无法对父HTML做出任何假设或更改。上面的例子显示了一个可能导致困难的情况。

编辑4：正如已经指出的那样，改变HTML以使视觉外观相同，但问题不存在将是微不足道的。但是，无论HTML是如何编写的，我都试图找到一个与HTML 一起使用的解决方案。

Answer 1

演示 - http://jsbin.com/tosusanowu/edit?html,js,output

假设您知道desired_size div始终隐藏了parent。

$(function(){
    var desired_size = getDesiredSize('#desired_size');
});

function getDesiredSize(el) {
    var $el = $(el), $parent = $el.parent(), desired_size = 0;
    $parent.attr('style', 'opacity:0;position:absolute');
    desired_size = $el.height();
    $parent.attr('style', 'display:none');
    return desired_size;
}

<div style="display:none;">
    ...Some random text or other content...
    <div id="desired_size">
        I want to find the height of this div when visible
    </div>
    ...Possibly some more content/other stuff...
</div>

Answer 2

以下javascript / jQuery函数应该在HTML结构未知的一般情况下工作：

function getHeight(objectID){
    var object=$('#'+objectID);
    var nextObject=object;
    var changedObjects=[];
    var counter=0; //to prevent infinite looping
    while(!object.is(':visible') && counter<100){
        counter+=1;
        var curObject=nextObject; //store a reference for use in loop
        nextObject=curObject.parent();
        var curStyle=curObject.css('display') //see if current object is hidden

        if(curStyle!='none')
            continue; //don't mess with non-hidden objects

        //see if the display style is inline, or from a CSS file
        var inlineStyles=curObject.attr("style");

        if(typeof(inlineStyles)!=='undefined'){
            inlineStyles.split(";").forEach(function(element){
                var style = element.split(":");
                if ($.trim(style[0]) === 'display') {
                    //Record the fact that the display properly is an inline style
                    curObject.data('floatinghead_inline_style',true);
                    return false; //break out of the forEach loop
                }
            });
        }

        curObject.show(); //if object is hidden, show it for now
        visitedObjects.push(curObject); //save a reference so we can put it back later
    }

    var height=object.height(); //this should work properly, since object should now be visible

    visitedObjects.forEach(function(item){
        if(item.data('floatinghead_inline_style')===true)
            item.hide();
        else
            item.css('display','');
    })
}

上面的代码没有假设HTML结构，特别是隐藏的父元素中有问题的对象的深度。此外，与＆＃34;克隆项目不同，DOM中的另一个可见位置＆＃34;选项，它应该适当考虑任何影响高度的继承属性。

javascript获取隐藏父母的元素大小

2 个答案: