js获取文本的宽度高度

最新推荐文章于 2024-05-13 05:07:48 发布

一个巨蟹座的前端

最新推荐文章于 2024-05-13 05:07:48 发布

阅读量2.1k

点赞数

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

本文链接：https://blog.csdn.net/weixin_47813845/article/details/121834817

版权

js 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

直接上代码

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

一个巨蟹座的前端

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
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"> <tit
复制链接

扫一扫