Javascript 如何获取div顶部和当前word字体顶部之间的高度（在此div内）

如何获取两条红线之间的高度（div顶部和该div内当前单词字体的顶部）

但是我在结果中找不到有用的信息

你有什么想法吗？

你收到的物品实际上包含了足够的信息，可以让我们知道文本的宽度和高度。
因此，在大多数简单的情况下，我们可以将此信息与父元素的边界框的信息结合起来，以获得实际的单行文本的边界框

函数getWordBBox（元素）{ //将上下文存储为函数的属性 如果（！getWordBBox.ctx）{ const canvas=document.createElement（“canvas”）； canvas.width=canvas.height=0；//无需使用任何内存 getWordBBox.ctx=canvas.getContext（“2d”）； } const ctx=getWordBBox.ctx； //从元素中获取计算样式 常数{ fontStyle，//复制字体样式 方特威克， 字体大小， 丰特家族， paddingTop，//获取内部偏移量 往左划， 边界宽度， 边框左宽度 }=getComputedStyle（元素）； const elemBBox=element.getBoundingClientRect（）； //使用这些设置设置上下文 ctx.font=[fontStyle，fontWeight，fontSize，fontFamily]。连接（“”）； ctx.textb基线=“顶部”； ctx.textAlign=“开始”； //抓取我们的TextMetrics对象 const metrics=ctx.measureText（element.textContent）； //烤箱 常量元素内部元素左=elemBBox.left+ parseFloat（borderLeftWidth）+parseFloat（paddingLeft）； const elem_internal_top=elemBBox.top+ parseFloat（borderTopWidth）+parseFloat（paddingTop）； 返回{ 左：metrics.actualBoundingBoxLeft*-1+元素左内， 顶部：metrics.actualBoundingBoxAscent*-1+元素内部顶部， 宽度：metrics.actualBoundingBoxRight+metrics.actualBoundingBoxLeft， 高度：metrics.actualBoundingBoxDescent+metrics.actualBoundingBoxAscent }; } 常量元素=document.querySelector（“.word”）； 元素输入=（evt）=>{ 常量bbox=getWordBBox（elem）； //简单地检查一下，我们得到了正确的文本框 const box_elem=document.querySelector（“.box”）； box_elem.style.setProperty（“顶部”，数学地板（bbox.top）+“px”）； box_elem.style.setProperty（“左”，数学地板（bbox.left）+“px”）； box_elem.style.setProperty（“宽度”，数学单元（bbox.width）+“px”）； box_elem.style.setProperty（“高度”，数学单元（bbox.height）+“px”）； 常量elemBBox=elem.getBoundingClientRect（）； const distance_from_top=bbox.top-elemBBox.top； const dist_elem=document.querySelector（“.vertical dist”）； dist_elem.style.setProperty（“top”，elemBBox.top+“px”）； dist_elem.style.setProperty（“left”，elemBBox.left+“px”）； dist_elem.style.setProperty（“width”，elemBBox.width-1+“px”）； dist_elem.style.setProperty（“高度”，距顶部的距离+“px”）； console.clear（）； console.log（“距顶部的距离：”，距顶部的距离）； }; 元素oninput（）

.word{
字体大小：30px；
字体系列：无衬线；
边框：2倍纯红；
填充：20px；
利润率：50像素；
线高：1；
}
.盒子{
背景：绿色；
位置：绝对位置；
指针事件：无；
不透明度：0.3；
}
.垂直距离{
宽度：100%；
位置：绝对位置；
背景颜色：蓝色；
不透明度：0.3；
指针事件：无；
}

人

检查div高度和字体大小。记住使用大写字母来查看字体在视觉上占据了多少空间

<div class="word">man</div>

.word {
   font-size: ...
   font-family: ...
}

context.measureText(text);