使用jquery识别按钮的高度会产生错误的结果。

Question

我在获取物体的高度时遇到了问题。请原谅我的弥撒(还有乱的！)在代码中，以这种方式显示问题更容易。

要重新创建问题-点击蓝色的‘播放’按钮-然后点击绿色‘回到我们所在的地方’按钮。

你会发现它在返回时不起作用，我被完全卡住了。

更糟糕的是，我正在计算一个可见性元素的高度:隐藏--所以我甚至无法判断它是否以某种奇怪的方式崩溃了！

问题在于暴行，这是我的“getheight()”功能，但我看不出它是在哪里引起问题的。(这里的代码是供参考的--小提琴讲述了整个故事。)

请帮帮我，伙计们--不要批评我的代码，因为我想得太多了:-D

附注：-由于这将变成一个相当复杂和混乱的代码和替代方法，以实现我正在努力实现的目标(改变一个容器到另一个容器，而不必绝对定位任何一个项目)，将不胜感激-只是一些想法，不想为我编写代码！

小提琴演示问题

function getHeight(elem){
var parent = $(elem).parent();
  if(parent.css('display') == "none"){
    console.log('parent');
    parent.css('display', 'hidden');
    parent.css('position', 'absolute');
    parent.css('display', 'block');

    theHeight = $( elem ).height();


    parent.css('display', 'none');

    return theHeight;

  }else{
    console.log('element');

    var beforePos = $(elem).css("position");
    var beforeDisplay = $(elem).css("display");
    var beforeVisibility = $(elem).css("visibility");

    $(elem).css('visibility', 'hidden');
    $(elem).css('position', 'absolute');
    $(elem).css("cssText", "display: block !important");

    console.log("DISPLAY" + $(elem).css('display'));
    theHeight = $(elem).height();
    console.log(theHeight);
    console.log(beforeVisibility);
    console.log(beforeDisplay);
    console.log(beforePos);
    console.log(elem);

    $(elem).css("cssText", "");

    $(elem).css('visibility', 'visible');
    $(elem).css('display', beforeDisplay);
    $(elem).css('position', beforePos);
    return theHeight;
  }
}

Answer 1

感谢马克向我指出文档--一旦我知道jQuery有什么不一致之处，修复实际上就相当简单了--

更改：-

theHeight = $(elem).height();

至

theHeight = $(elem).css("height");

它的功能就像它应该的那样！

现在工作小提琴

Answer 2

至于获得隐藏元素的高度，jQuery页面这样说：

当隐藏元素或其父元素时，不能保证.height()报告的值是准确的。要获得准确的值，请确保元素在使用.height()之前是可见的。jQuery将尝试暂时显示并重新隐藏元素，以测量其尺寸，但这是不可靠的，而且(即使准确)会显著影响页面性能。这种显示和重新隐藏的测量功能可能会在未来版本的jQuery中被删除.

链接到jQuery高度函数