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

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> js获取span到浏览器窗口顶部的距离，包括被lineHeight撑开的部分在内 -> 正文阅读

[JavaScript知识库]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>