js获取span到浏览器窗口顶部的距离，包括被lineHeight撑开的部分在内

getBoundingClientRect

getBoundingClientRect().top拿到的是真实dom部分到顶部的距离，不把行高算在内
getBoundingClientRect().height获取的也是内容部分的高度，如果没有设置样式height

某些情况下

需要拿到包括行高导致的间隙在内盒子到顶部的距离，也就是绿色开始位置到顶部的距离(但是无法读取容器#box的任何属性的场景，本篇笔记就是基于这样一个场景下开始的)

代码截图：

在线访问

代码查看

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}span {line-height: 40px;background: red;font-size: 14px;}#box {background: green;font-size: 0;}.wrap {background: orange;padding: 10px 0;}</style>
</head><body><div class="wrap"><div id="box"><span>aaaaa</span></div></div><div id="info"></div><script>window.onload = function() {let div = document.querySelector("#box");var span = document.querySelector("span");var info = document.querySelector("#info");var spanLineHeight = parseInt(window.getComputedStyle(span).lineHeight);let spanRect = span.getBoundingClientRect();let spanLineRange = Math.floor((spanLineHeight - spanRect.height) / 2); //向下取证,这里直接除2页并不是特别准确，实际渲染文字不一定完全上架【居中】// let spanLineRange = (spanLineHeight - spanRect.height) / 2; //向下取证console.log("spanLineRange", spanLineRange)let txt = `<div>#box: offsetY, ${div.offsetTop}, getBoundingClientRect().top, ${div.getBoundingClientRect().top}</div><div>span:"offsetY", ${span.offsetTop}, "getBoundingClientRect().top", ${spanRect.top} <b>span内容高:${spanRect.height}</b> <B>行高${spanLineHeight}</B></div><div>红色部分和绿色部分的间隙是行高导致的</div><div>getBoundingClientRect().top拿到的是真实dom部分到顶部的距离，不把行高算在内</div><div>getBoundingClientRect().height获取的也是内容部分的高度，如果没有设置样式height</div><div><strong>某些情况下，应该拿到行高到顶部的距离，也就是绿色开始位置到顶部的距离</strong></div><div>拿到红色部分包括lineheight在内的距离顶部距离${spanRect.top - spanLineRange}</div><div>实际上这里拿到的lineheight距离顶部的距离并不准确,理想状态下设置了行高后内容到上下间距的距离是相等的</div><div>但是当前demo再window 谷歌浏览器上面出现了底部间距比上面多了1px的情况</div><div>当前代码，文字行高内，文字到span顶部的间隙的获取是直接除2后向下取整的，查看代码<B>spanLineRange</b>变量</div><div>所以当前这种方式取值方式，并不是很<strong>准确</strong>，对准确性要求很高的场景不适用</div>`;console.log(spanRect.top, "spanLineHeight 顶部- spanRect.height", spanLineHeight - spanRect.height, spanRect.top - spanLineRange)document.querySelector("#info").innerHTML = txt;}</script>
</body></html>

#box

绿色部分，无高度设置，被红色部分的行高撑开，相关属性：

offsetTop：10
getBoundingClientRect().top: 10

span

红色部分，设置了行高40px，span内容高:19 ，相关属性：

offsetTop： 20,
getBoundingClientRect().top:20
getBoundingClientRect().height:19

很明显这里span的getBoundingClientRect().top得到是红色部分到顶部的距离，但是我们现在需要拿到的不是span内容部分到顶部的距离而是包括行高在内的容器到顶部的距离

红色部分和绿色部分的间隙是行高导致的

拿到红色部分包括lineheight在内的距离顶部距离10

实际上这里拿到的lineheight距离顶部的距离并不准确,理想状态下设置了行高后内容到上下间距的距离是相等的

但是当前demo在window 谷歌浏览器上面出现了span文字底部间距比上面多了1px的情况

当前代码，文字行高内，文字到span顶部的间隙的获取是直接除2后向下取整的，查看代码spanLineRange变量

所以当前这种方式取值方式，并不是很准确

js获取span到浏览器窗口顶部的距离，包括被lineHeight撑开的部分在内相关推荐

元素随着滚动条滚动而滚动，但是到浏览器窗口顶部的距离是固定的功能代码...
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...
关于使用“JS获取屏幕，浏览器，网页高度宽度”的个人思考
在js开发中免不了获取屏幕或文档的宽度高度问题.今天在搜索引擎中搜索时,看到最多的就是这篇文章这张图片已经被转载了很多了,我想说的是,在转载之前能否先思考下,是否完全懂了,而不是囫囵吞枣(虽然我也记 ...
JS获取屏幕分辨率及窗口尺寸
网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...
angular js 打开新的浏览器窗口
1.带参数打开新窗口 const newPath = location.origin + '/list' + '?name=' + name + '&sex=' + sex ; const w ...
JS如何关闭当前浏览器窗口？
在浏览器中,如何进行当前浏览器窗口的关闭呢? <script>function close() {window.open("about:blank", "_t ...
js获取屏幕、浏览器、页面的宽度和高度
介绍容器的尺寸是指当前分辨率下的高度和宽度(分辨率不同,值就不相同) 屏幕信息 screen.height:屏幕高度 screen.availHeight:屏幕可用宽度 screen.height ...
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度
一.先来大致了解下基本的信息上图时一张我从别人的博客中找到的,比较系统形象的展示了一些基本的信息. 二.显示器的屏幕信息 screeen.height:屏幕分辨率的高 screen.width:屏幕 ...
JS 获取元素到浏览器页面最左侧和顶部的距离
// offsetParent:父级元素 function getElementLeft(element){var left = element.offsetLeft;// 当前元素左边距var to ...
JQ和Js获取span标签的内容
转自:https://www.cnblogs.com/anniey/p/6439021.html html: 1 <span id="content">'我是span标 ...