国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

lingdududu / 2570人閱讀

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

假設(shè),DOM 被設(shè)置了 height:20px 和 overflow:hidden,如何計算它的真實高度呢?

一、問題背景

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

但如何計算【段落高度小于給定高度】呢?比如,段落被設(shè)置了 height="20px",如何計算它的真實高度呢?

二、干貨,計算元素真實高度函數(shù)

方法如下,直接傳入要計算的目標(biāo) 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;
}

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

三、發(fā)散思考 1. 復(fù)制元素的必要性

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

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

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

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

都是計算高度的,但前者計算的是占位高度,包括 padding+border;后者計算的是單純高度,經(jīng)過多層 css 優(yōu)先級競爭之后的 height 取值(px),獲取純數(shù)值還需要parseInt()。本次情況,需要計算占位高度,所以選擇getBoundingClientRect()

4. removeChild 的必要性

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

四、自勉

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

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

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/51242.html

相關(guān)文章

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

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

    gaomysion 評論0 收藏0
  • js輕松實現(xiàn)折疊面板

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

    suxier 評論0 收藏0
  • js輕松實現(xiàn)折疊面板

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

    gghyoo 評論0 收藏0
  • 用原生 js && jquery 實現(xiàn)知乎收起答案功能

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

    brianway 評論0 收藏0
  • 用原生 js && jquery 實現(xiàn)知乎收起答案功能

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

    Seay 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<