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

背景

在开发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项目中的一个重要需求,自己在这个方面也踩了许多坑,因此写了这一篇博客来进行记录,同时其他人如果看到了也可以避免一些常见问题。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏简书专栏

基于Scrapy爬取伯乐在线网站

标题中的英文首字母大写比较规范,但在python实际使用中均为小写。 2018年7月20日笔记 Scrapy官方文档网址:https://doc.scrap...

61850
来自专栏Spring相关

Spring Boot遇到的某些问题

因为项目要访问本地硬盘的文件所以要去Tomcat的server.xml里配置Context ,

14750
来自专栏听Allen瞎扯淡

Sed 命令详解

sed是stream editor的简称,也就是流编辑器。它一次处理一行内容,处理时,把当前处理的行存储在临时缓冲区中,称为“模式空间”(pattern spa...

10510
来自专栏Spring相关

springboot自定义错误页面

31720
来自专栏Spring相关

Springboot用官方建议访问Html页面并接传值

我们以前通常习惯用webapp来放置jsp页面,但是到了Springboot中,官方建议用Static文件夹来存放及静态的资源,

1.2K40
来自专栏Spring相关

第6章—渲染web视图—使用Thymeleaf

长期以来,jsp在视图领域有非常重要的地位,随着时间的变迁,出现了一位新的挑战者:Thymeleaf,Thymeleaf是原生的,不依赖于标签库.它能够在接受原...

9620
来自专栏陈满iOS

程序员修养·Markdown语法学习手册

使用 *,+,- 表示无序列表(这三个的效果都是一样),注意符号与后续文本要空格。

13610
来自专栏Spring相关

Spring Boot遇到的某些问题

在spring整合thymeleaf模板后,页面中文将显示乱码,需要设置web.xml和springmvc-servlet.xml配置才能使中文不乱码。

14620
来自专栏Spring相关

Css权重解析

关于CSS权重,我们需要一套计算公式来去计算,这个就是 CSS Specificity,我们称为CSS 特性或称非凡性,它是一个衡量CSS值优先级的一个标准 具...

17920
来自专栏finleyMa

react学习系列4 组件生命周期

组件的生命周期非常重要。官方文档 已经就讲的比较清楚了 找了半天发现下面的图最清晰直观(点击放大):

10840

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励