代码之家  ›  专栏  ›  技术社区  ›  Mir-Ismaili

计算元素没有默认值时的默认高度

  •  2
  • Mir-Ismaili  · 技术社区  · 8 年前

    我想计算元素的高度(例如 div 这是默认值(= initial auto ) .

    现在 (例如40px),但我想知道如果将其设置为 最初的 汽车 .

    换句话说:

    myElement.style.height = '40px'; // for example
    // ...
    console.log(myElement.clientHeight); // This logs "40". This is not the value I want.
    myElement.style.height = 'initial';
    console.log(myElement.clientHeight); // This logs the value I want. But I don't want to execute above statement AT ALL!
    
    3 回复  |  直到 5 年前
        1
  •  2
  •   aurelienshz    8 年前

    如果我理解正确,您希望能够获得元素的高度 本来 如果没有定义精确的高度样式值?

    答案很简单:你不能。浏览器必须呈现DOM才能访问链接到它的值,如clientHeight。 但是,您可能会使用一些老套的方法,例如将高度设置为 auto ,读取它并将其设置回40px,或者使用隐藏元素(可见性:隐藏,而不是显示:无,因为需要渲染),但请注意,这有点脏,很难维护。

        2
  •  0
  •   Trash Can    8 年前

    您可以通过调用来检索任何元素的维度 yourElement.getBoundingClientRect() 即使您没有为其中一个维度提供显式值

    此方法返回具有许多属性的对象,包括高度

    了解更多 HERE

        3
  •  0
  •   Mir-Ismaili    8 年前

    这是我目前找到的最好的解决方案, 如果元素是容器 内部的 div 立即在元素内部,以便 div )包装全部内容 你的(外部)元素 因此:

    <theElement style="height:40px;"> <!-- This is a CONTAINER! -->
        <div id="inner_div" style="margin:0; border:0; height:auto;">
            <!-- Your contents will be inserted here. -->
        <div>
    </theElement>
    

    现在您可以:

    console.log(theElement.clientHeight) // This logs 40.
    
    yourDesiredValue = document.getElementById('inner_div').clientHeight;
    console.log(yourDesiredValue);       // This logs that you want.
    
    console.log(theElement.clientHeight) // This logs 40.
    

    注意,内部 div 一定没有 margin 没有 border-width 及其 CSS height 必须是 auto initial .

    此外,建议插入: overflow-y:hidden 对于 theElement .如此内敛 div 在视觉上,它不能从父边界传递。