js获取文本的宽度高度

最新推荐文章于 2023-08-24 17:19:11 发布

一个巨蟹座的前端

最新推荐文章于 2023-08-24 17:19:11 发布

阅读量2.3k

点赞数

分类专栏： js 文章标签： javascript 前端 html

本文链接：https://blog.youkuaiyun.com/weixin_47813845/article/details/121834817

版权

js 专栏收录该内容

24 篇文章

订阅专栏

直接上代码

<!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;
        }
        div{
            font-size: 14px;
            font-family: "微软雅黑";
        }
    </style>
</head>
<body>
    <div>
        <span>123456789</span>
    </div>
    <script>
        function textSize(fontSize, fontFamily, text) {
            var span = document.createElement('span')
            var dom = document.createElement('div')
            dom.style.width = '100%'
            dom.style.height = '10px'
            dom.style.overflow = 'hidden'
            var result = {}
            result.width = span.offsetWidth
            result.height = span.offsetHeight
            span.style.visibility = 'hidden'
            span.style.fontSize = fontSize
            span.style.fontFamily = fontFamily
            span.style.display = 'inline-block'
            dom.appendChild(span)
            document.body.appendChild(dom)
            if (typeof span.textContent !== 'undefined') {
                span.textContent = text
            } else {
                span.innerText = text
            }
            result.width = parseFloat(window.getComputedStyle(span).width) - result.width
            result.height = parseFloat(window.getComputedStyle(span).height) - result.height
            dom.remove()
            return result
        } 
        var res =  textSize(14, "微软雅黑", "123456789")
        console.log(res.height);
    </script>

</body>

</html>

经测试发现，div的高度为19px，控制台打印出来的结果也是19