動(dòng)態(tài)生成DOM元素的高度及行數(shù)獲取與計(jì)算方法

susheng 發(fā)布于2019-08-30 12:57 / 532人閱讀

摘要：很多時(shí)候，需要計(jì)算高度的元素都是動(dòng)態(tài)生成的，我們無(wú)法在數(shù)據(jù)渲染前獲取到它的高度。獲取高度后頁(yè)面行數(shù)計(jì)算將在后面統(tǒng)一講解。優(yōu)點(diǎn)此方案通過(guò)直接在實(shí)際場(chǎng)景的頁(yè)面上渲染后進(jìn)行高度計(jì)算，因此計(jì)算精準(zhǔn)，不存在任何偏差。

背景

在開(kāi)發(fā)IM的項(xiàng)目過(guò)程中，經(jīng)常會(huì)有出現(xiàn)一些需要計(jì)算DOM高度，然后超出若干行隱藏等需求。很多時(shí)候，需要計(jì)算高度的DOM元素都是動(dòng)態(tài)生成的，我們無(wú)法在數(shù)據(jù)渲染前獲取到它的高度。

但是，如果我們需要獲取到這段在內(nèi)存中未渲染的動(dòng)態(tài)文本，也能夠通過(guò)如下幾個(gè)方法。

技術(shù)方案

根據(jù)前端的基本常識(shí)，在內(nèi)存中未渲染的DOM元素是無(wú)法獲取到高度的，因此我們有兩個(gè)方向來(lái)解決這個(gè)難題：

通過(guò)字?jǐn)?shù)對(duì)行數(shù)進(jìn)行估算

將元素渲染后進(jìn)行高度測(cè)算

實(shí)現(xiàn)方案

以下的實(shí)現(xiàn)方案將根據(jù)上面所選擇的技術(shù)方案來(lái)進(jìn)行實(shí)現(xiàn)。

通過(guò)字?jǐn)?shù)進(jìn)行估算 方案

此方案無(wú)需多言，就是通過(guò)字?jǐn)?shù)和每一行能夠容下的字的個(gè)數(shù)進(jìn)行估算等。在項(xiàng)目最開(kāi)始時(shí)，我采用的就是這個(gè)方案。具體實(shí)現(xiàn)代碼太過(guò)簡(jiǎn)單，因此也不在此添加了。

優(yōu)點(diǎn)

此方案實(shí)現(xiàn)簡(jiǎn)單，基本不需要任何成本，適用于只有等寬文字的情況下。

缺點(diǎn)

這個(gè)方案缺點(diǎn)也比較明顯，基本無(wú)法用于純文本之外的任何情況。如果字體為非等寬字體或者存在之類(lèi)的換行符或者是之類(lèi)的制表符時(shí)，估算的準(zhǔn)確度也會(huì)大大下降。

在DOM渲染后進(jìn)行操作 方案

顧名思義，此方案就是先不考慮DOM元素行數(shù)邏輯，直接將所有的DOM節(jié)點(diǎn)全部渲染到頁(yè)面中，渲染完成后再對(duì)進(jìn)行后續(xù)邏輯判斷。獲取高度后頁(yè)面行數(shù)計(jì)算將在后面統(tǒng)一講解。

優(yōu)點(diǎn)

此方案通過(guò)直接在實(shí)際場(chǎng)景的頁(yè)面上渲染后進(jìn)行高度計(jì)算，因此計(jì)算精準(zhǔn)，不存在任何偏差。同時(shí)，此方案實(shí)現(xiàn)起來(lái)也較為簡(jiǎn)單，只需要將業(yè)務(wù)邏輯執(zhí)行時(shí)間后延，并不需要開(kāi)發(fā)額外的代碼。

缺點(diǎn)

該方案缺點(diǎn)也比較明顯，由于是先渲染后處理，因此頁(yè)面DOM元素會(huì)出現(xiàn)重繪和重排，導(dǎo)致頁(yè)面閃動(dòng)，從而影響用戶(hù)的體驗(yàn)。

鏡像計(jì)算 方案

該方案的靈感來(lái)自于上一個(gè)方案。因?yàn)樵趯?shí)際的頁(yè)面中進(jìn)行計(jì)算能夠保證頁(yè)面高度計(jì)算沒(méi)有任何誤差，因此我們需要一個(gè)實(shí)際的場(chǎng)景，讓瀏覽器來(lái)幫助我們進(jìn)行高度計(jì)算。同時(shí)，我們又不能在具體的功能頁(yè)面中先渲染后計(jì)算，因此我們可以直接創(chuàng)建一個(gè)與實(shí)際頁(yè)面中一模一樣的容器來(lái)進(jìn)行高度計(jì)算。這樣我們既能夠精確計(jì)算，又能夠不影響用戶(hù)體驗(yàn)。

具體實(shí)現(xiàn)的代碼可以參考如下示例：

export default function getLines(element = "div", style = {}, html = "") {
    let node = document.createElement(element);//創(chuàng)建一個(gè)新容器
    let length;
    each(style, (element, index)=>{
        node.style[index] = element;//將傳入的style遍歷后賦值給新容器
    });
    node.innerHTML = html;
    document.body.appendChild(node);//需要將新容器掛載到DOM中,瀏覽器才會(huì)進(jìn)行高度計(jì)算
    let height = global.getComputedStyle(node).height;
    document.body.removeChild(node);//需要將鏡像DOM進(jìn)行移除
    if(height.indexOf("px")>0) {
        length = parseInt(height.split("px")[0]);
    }else {
        length = 0;
    }
    return length;
}

優(yōu)點(diǎn)

該方案基本上繼承了第二個(gè)方案的所有優(yōu)點(diǎn)——精確計(jì)算，無(wú)誤差，并且避免了出現(xiàn)頁(yè)面閃動(dòng)的情況。

缺點(diǎn)

此方案仍然存在一些問(wèn)題，將新容器掛載到document元素上時(shí)，可能會(huì)引發(fā)DOM元素的重新渲染，極低概率會(huì)影響頁(yè)面布局。同時(shí)，屬性值等需要自己手動(dòng)傳入，而不是利用現(xiàn)成的容器，比較費(fèi)時(shí)費(fèi)力。

方案再優(yōu)化 利用現(xiàn)有DOM容器

使用cloneNode方法來(lái)對(duì)現(xiàn)有的容器進(jìn)行clone，我們可以省去輸入樣式的麻煩，同時(shí)能夠精確保證兩個(gè)容器完全一致。

隱藏鏡像DOM

在實(shí)踐過(guò)程中，在append以后立刻remove鏡像DOM節(jié)點(diǎn)，不會(huì)對(duì)頁(yè)面產(chǎn)生任何影響。如果擔(dān)心添加時(shí)會(huì)給頁(yè)面造成閃動(dòng)效果，可以給鏡像DOM添加上position:fixed;visibility:hidden;z-index:-999;屬性，能夠讓鏡像DOM在append到頁(yè)面時(shí)，不會(huì)影響當(dāng)前頁(yè)面的任何布局。

為什么我們不使用display:none來(lái)實(shí)現(xiàn)上述效果呢？因?yàn)樵谑褂昧嗽搶傩院螅?b>window.getComputedStyle獲取的高度將變?yōu)?b>auto。同理，如果元素的display屬性為inline時(shí)，也會(huì)出現(xiàn)類(lèi)似的效果，因此我們需要將display指定為block或者inline-block。

理論上我們的容器都應(yīng)該為塊級(jí)元素，否則計(jì)算高度的意義也就不存在了。因此在容器clone時(shí)只需要留意即可，不需要重新指定。

兩個(gè)優(yōu)化點(diǎn)經(jīng)過(guò)實(shí)踐已經(jīng)證明可行，具體代碼就不附上了，如果有需要的可以給我留言~~

通過(guò)高度來(lái)計(jì)算行數(shù)

目前，通過(guò)高度來(lái)計(jì)算行數(shù)并沒(méi)有什么比較好的方法，一般是通過(guò)line-height兩個(gè)屬性來(lái)進(jìn)行計(jì)算。

如果line-height為倍數(shù)的話，則還需要font-size屬性來(lái)確定具體高度。

具體算法為：總高度 / 每一行高度 = 行數(shù)

而每一行高度則通過(guò)line-height或者line-height* font-size確定。

總結(jié)

獲取動(dòng)態(tài)元素的高度一直都是IM項(xiàng)目中的一個(gè)重要需求，自己在這個(gè)方面也踩了許多坑，因此寫(xiě)了這一篇博客來(lái)進(jìn)行記錄，同時(shí)其他人如果看到了也可以避免一些常見(jiàn)問(wèn)題。

云服務(wù)器 GPU云服務(wù)器 dom獲取元素動(dòng)態(tài)生成dom js實(shí)現(xiàn)動(dòng)態(tài)生成元素 dom高度

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115189.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

susheng

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow.keras

閱讀 540·2023-04-25 14:26
子網(wǎng)劃分

閱讀 1295·2021-11-25 09:43
云虛擬主機(jī)如何關(guān)閉-如何重啟和關(guān)閉云虛擬主機(jī)？

閱讀 3489·2021-09-22 15:25
從輸入U(xiǎn)RL到頁(yè)面展示

閱讀 1457·2019-08-30 15:54
動(dòng)態(tài)生成DOM元素的高度及行數(shù)獲取與計(jì)算方法

閱讀 533·2019-08-30 12:57
騰訊云IM-SDK集成（web端）完成IM登錄

閱讀 778·2019-08-29 17:24
前端碎語(yǔ)（1）

閱讀 3174·2019-08-28 18:13
CSS固定高度或?qū)挾葍?nèi)容超出后自動(dòng)增加的辦法

閱讀 2696·2019-08-28 17:52

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

動(dòng)態(tài)生成DOM元素的高度及行數(shù)獲取與計(jì)算方法

相關(guān)文章