Js获取字符串的显示宽度/高度

最新推荐文章于 2025-04-21 18:21:46 发布

优小U

最新推荐文章于 2025-04-21 18:21:46 发布

阅读量2.1w

点赞数 10

分类专栏： Web前端移动开发文章标签： javascript 字符串显示宽度精确宽度

本文为博主原创文章，未经博主允许不得转载，违者必究。

本文链接：https://blog.youkuaiyun.com/zy1281539626/article/details/78489279

版权

Web前端同时被 2 个专栏收录

79 篇文章

订阅专栏

移动开发

29 篇文章

订阅专栏

重点:
1.在H5页面，文字大小单位为rem
2.不同的font-family，文字的宽度不一样
3.文字宽度同时受font-size和font-family影响

思路：
在页面动态创建一个节点，设置节点的font-size,font-family,还有内容，然后获取它的宽度。节点宽度必须随内容变化而变化，所以使用display:inline-block 为了避免禅城误差，使用 getComputedStyle 方法来计算宽度，具体原因看上一篇博客：http://blog.youkuaiyun.com/zy1281539626/article/details/78488062

废话不多说，直接上代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
</head>
<body>
  <!-- 此span作为对比 -->
    <span id="test" style="display: inline-block;font-size:20px;font-family: arial;">abcdefg</span>
    <script src="jquery.min.js"></script>
    <script>
      function textSize(fontSize,fontFamily,text){
        var span = document.createElement("span");
        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";
        document.body.appendChild(span);
        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;
        return result;
      }
      console.log(textSize("20px","Arial","abcdefg"));
    </script>
</body>
</html>