动态天生DOM元素的高度及行数猎取与计算方法

2024年5月28日 250次阅读 来源: hjava

背景

在开辟IM的项目过程当中，常常会有涌现一些须要盘算DOM高度，然后超越多少行隐蔽等需求。很多时刻，须要盘算高度的DOM元素都是动态天生的，我们没法在数据衬着前猎取到它的高度。

然则，假如我们须要猎取到这段在内存中未衬着的动态文本，也能够经由过程以下几个要领。

手艺计划

依据前端的基础常识，在内存中未衬着的DOM元素是没法猎取到高度的，因而我们有两个方一向处理这个困难：

  1. 经由过程字数对行数举行预算

  2. 将元素衬着后举行高度测算

完成计划

以下的完成计划将依据上面所挑选的手艺计划来举行完成。

经由过程字数举行预算

计划

此计划无需多言，就是经由过程字数和每一行能够容下的字的个数举行预算等。在项目最开始时，我采纳的就是这个计划。详细完成代码太甚简朴，因而也不在此增加了。

长处

此计划完成简朴，基础不须要任何本钱，适用于只要等宽笔墨的状况下。

瑕玷

这个计划瑕玷也比较显著，基础没法用于纯文本以外的任何状况。假如字体为非等宽字体或许存在\n之类的换行符或许是\t之类的制表符时，预算的准确度也会大大下落。

在DOM衬着后举行操纵

计划

望文生义，此计划就是先不斟酌DOM元素行数逻辑，直接将一切的DOM节点悉数衬着到页面中，衬着完成后再对举行后续逻辑推断。猎取高度后页面行数盘算将在背面一致解说。

长处

此计划经由过程直接在现实场景的页面上衬着后举行高度盘算，因而盘算精准，不存在任何偏差。同时，此计划完成起来也较为简朴，只须要将营业逻辑执行时间后延，并不须要开辟分外的代码。

瑕玷

该计划瑕玷也比较显著，由因而先衬着后处理，因而页面DOM元素会涌现重绘和重排，致使页面闪烁，从而影响用户的体验。

镜像盘算

计划

该计划的灵感来自于上一个计划。由于在现实的页面中举行盘算能够保证页面高度盘算没有任何偏差，因而我们须要一个现实的场景，让浏览器来协助我们举行高度盘算。同时，我们又不能在详细的功用页面中先衬着后盘算，因而我们能够直接建立一个与现实页面中如出一辙的容器来举行高度盘算。如许我们既能够准确盘算，又能够不影响用户体验。

详细完成的代码能够参考以下示例：

export default function getLines(element = 'div', style = {}, html = '') {
    let node = document.createElement(element);//建立一个新容器
    let length;
    each(style, (element, index)=>{
        node.style[index] = element;//将传入的style遍历后赋值给新容器
    });
    node.innerHTML = html;
    document.body.appendChild(node);//须要将新容器挂载到DOM中,浏览器才会举行高度盘算
    let height = global.getComputedStyle(node).height;
    document.body.removeChild(node);//须要将镜像DOM举行移除
    if(height.indexOf('px')>0) {
        length = parseInt(height.split('px')[0]);
    }else {
        length = 0;
    }
    return length;
}

长处

该计划基础上继续了第二个计划的一切长处——准确盘算，无偏差，而且防止了涌现页面闪烁的状况。

瑕玷

此计划依然存在一些问题，将新容器挂载到document元素上时，可能会激发DOM元素的从新衬着，极低几率会影响页面规划。同时，属性值等须要本身手动传入，而不是应用现成的容器，比较费时辛苦。

计划再优化

应用现有DOM容器

运用cloneNode要领来对现有的容器举行clone，我们能够省去输入款式的贫苦，同时能够准确保证两个容器完全一致。

隐蔽镜像DOM

在实践过程当中，在append今后马上remove镜像DOM节点，不会对页面发生任何影响。假如忧郁增加时会给页面形成闪烁结果，能够给镜像DOM增加上position:fixed;visibility:hidden;z-index:-999;属性，能够让镜像DOM在append到页面时，不会影响当前页面的任何规划。

为何我们不运用display:none来完成上述结果呢？由于在运用了该属性后，window.getComputedStyle猎取的高度将变成auto。同理，假如元素的display属性为inline时，也会涌现相似的结果，因而我们须要将display指定为block或许inline-block。

理论上我们的容器都应该为块级元素，不然盘算高度的意义也就不存在了。因而在容器clone时只须要注意即可，不须要从新指定。

两个优化点经由实践已证实可行，详细代码就不附上了，假如有须要的能够给我留言~~

经由过程高度来盘算行数

现在，经由过程高度来盘算行数并没有什么比较好的要领，平常是经由过程line-height两个属性来举行盘算。

假如line-height为倍数的话，则还须要font-size属性来肯定详细高度。

详细算法为：总高度 / 每一行高度 = 行数

而每一行高度则经由过程line-height或许line-height* font-size肯定。

总结

猎取动态元素的高度一向都是IM项目中的一个主要需求，本身在这个方面也踩了很多坑，因而写了这一篇博客来举行纪录，同时其他人假如看到了也能够防止一些常见问题。

    原文作者：hjava
    原文地址: https://segmentfault.com/a/1190000004956121
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞