ios元素距离顶部高度vue js 元素距离页面顶部距离

转载

恋上一只猪 2024-01-25 22:05:58

文章标签 ios元素距离顶部高度vue javascript html 取整取值 文章分类 iOS 移动开发

getBoundingClientRect

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

某些情况下

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

代码截图：

ios元素距离顶部高度vue js 元素距离页面顶部距离_取值

代码查看

<!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>