獲取height固定折疊元素真實高度方法

gaomysion 發布于2019-08-21 16:21 / 1826人閱讀

摘要：如果段落高度小于給定高度，則不限制最大高度，隱藏展開按鈕。但如何計算段落高度小于給定高度呢比如，段落被設置了，如何計算它的真實高度呢二干貨，計算元素真實高度函數方法如下，直接傳入要計算的目標就好了。

假設，DOM 被設置了 height:20px 和 overflow:hidden，如何計算它的真實高度呢？

一、問題背景

最近在優化折疊組件，需要在窗口寬度變化的時候重新判斷展開收起狀態。如果段落高度大于給定高度，則隱藏超高內容，展示【展開】按鈕。如果段落高度小于給定高度，則不限制最大高度，隱藏【展開】按鈕。

但如何計算【段落高度小于給定高度】呢？比如，段落被設置了 height="20px"，如何計算它的真實高度呢？

二、干貨，計算元素真實高度函數

方法如下，直接傳入要計算的目標 dom 就好了。

function getHeightUnfold (dom) {
    var fakeNode = dom.cloneNode(true);
    fakeNode.style.position = "absolute";
    // 先插入再改樣式，以防元素屬性在createdCallback中被添加覆蓋
    dom.parentNode.insertBefore(fakeNode, dom);
    fakeNode.style.height = "auto";
    fakeNode.style.visibility = "hidden";

    var height = fakeNode.getBoundingClientRect().height;
    dom.parentNode.removeChild(fakeNode);

    return height;
}

這個方法的核心是，創建一個不可見元素，摘除高度限制，最終計算它的高度。

三、發散思考 1. 復制元素的必要性

Jenny_L 給復制出來的元素增加了 postiion: absolute 屬性，為了不觸發后面元素的重拍重繪，節省瀏覽器資源。如果直接快速地給目標元素設置 height: auto + 獲取高度 + height: 20px，雖然能達到目的，但會造成所有后續元素的（不一定可見）抖動，盡量避免。

2. Node.cloneNode 與 document.createElement("div") 的選擇

后者與innerHTML配合使用，雖然能夠模仿目標元素的內層內容，但不能繼承目標元素的樣式。即使使用document.createElement(dom.nodeName)也會有問題，不能繼承內聯樣式。而使用cloneNode不但可以繼承 class，css，還能觸發 createdCallback(如果有的話)，繼承 js 中添加的內聯樣式。

3. fakeNode.getBoundingClientRect().height 與 getComputedStyle(fakeNode).height 的選擇

都是計算高度的，但前者計算的是占位高度，包括 padding+border；后者計算的是單純高度，經過多層 css 優先級競爭之后的 height 取值（px），獲取純數值還需要parseInt()。本次情況，需要計算占位高度，所以選擇getBoundingClientRect()

4. removeChild 的必要性

雖然 fakeNode 不可見，但終究在文檔流中，display 不是 none，重拍的時候會參與計算。除此之外，如果原先 dom 帶有 id="someID" 的話，刪除 fakeNode 之前，文檔中就會存在兩個 id="someID" 的元素。未來瀏覽器再做選擇的時候，就懵逼了。

四、自勉

好久不寫文章了，草稿箱里存了好多代碼片段，要加油了。

不得不說，這種小代碼片段還是很有分享價值的，一次研究（竟然花了一個小時），未來處處復制，走向人生巔峰。

GPU云服務器云服務器 js獲取height html p元素高度獲取頁面高度 js獲取視頻高度

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88439.html

獲取height固定折疊元素真實高度方法

摘要：如果段落高度小于給定高度，則不限制最大高度，隱藏展開按鈕。但如何計算段落高度小于給定高度呢比如，段落被設置了，如何計算它的真實高度呢二干貨，計算元素真實高度函數方法如下，直接傳入要計算的目標就好了。假設，DOM 被設置了 height:20px 和 overflow:hidden，如何計算它的真實高度呢？一、問題背景最近在優化折疊組件，需要在窗口寬度變化的時候重新判斷展開收起狀態...

lingdududu 2019-08-01 17:35 評論0 收藏0
js輕松實現折疊面板

摘要：移動端導航欄有個很常見的折疊菜單，有插件實現，有組件。最近用無插件實現一個這樣的效果。探究歷程直接采用，雖然實現了控制容器的顯示和隱藏，但是效果生硬。移動端導航欄有個很常見的折疊菜單，bootstrap有collapse插件實現，jQuery UI有Accordion組件。最近用js無插件實現一個這樣的效果。探究歷程 display：none；直接采用display，雖然實現...

suxier 2019-08-21 17:26 評論0 收藏0
js輕松實現折疊面板

摘要：移動端導航欄有個很常見的折疊菜單，有插件實現，有組件。最近用無插件實現一個這樣的效果。探究歷程直接采用，雖然實現了控制容器的顯示和隱藏，但是效果生硬。移動端導航欄有個很常見的折疊菜單，bootstrap有collapse插件實現，jQuery UI有Accordion組件。最近用js無插件實現一個這樣的效果。探究歷程 display：none；直接采用display，雖然實現...

gghyoo 2019-08-29 13:44 評論0 收藏0
用原生 js && jquery 實現知乎收起答案功能

摘要：需求很簡單，而且和知乎的顯示全部收起功能非常相似，但是了一下沒有找到類似的，因此決定自己實現一個看了知乎的網頁代碼。 showImg(https://segmentfault.com/img/remote/1460000008488966);showImg(https://segmentfault.com/img/remote/1460000008488967); Update 20...

brianway 2019-08-20 12:19 評論0 收藏0
用原生 js && jquery 實現知乎收起答案功能

摘要：需求很簡單，而且和知乎的顯示全部收起功能非常相似，但是了一下沒有找到類似的，因此決定自己實現一個看了知乎的網頁代碼。 showImg(https://segmentfault.com/img/remote/1460000008488966);showImg(https://segmentfault.com/img/remote/1460000008488967); Update 20...

Seay 2019-08-01 15:57 評論0 收藏0