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

陆康永

已于 2022-03-21 10:58:19 修改

阅读量1.1k

点赞数

分类专栏： demo 代码片段文章标签： javascript

于 2022-03-21 10:42:10 首次发布

本文链接：https://blog.csdn.net/xiaomogg/article/details/123629169

版权

代码片段同时被 2 个专栏收录

59 篇文章 0 订阅

订阅专栏

demo

41 篇文章 1 订阅

订阅专栏

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变量

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

陆康永

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
js获取span到浏览器窗口顶部的距离，包括被lineHeight撑开的部分在内

getBoundingClientRectgetBoundingClientRect().top拿到的是真实dom部分到顶部的距离，不把行高算在内 getBoundingClientRect().height获取的也是内容部分的高度，如果没有设置样式height某些情况下应该拿到行高到顶部的距离，也就是绿色开始位置到顶部的距离代码截图：在线访问#box（绿色部分，无高度设置，被红色部分的行高撑开）:offsetY：10 getBounding...
复制链接

扫一扫