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

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

对比文字精确宽度如图：

函数计算得到的宽度：

宽高非常精确，用这种方法就可以计算在H5页面中当前字体字号的每个字符的宽度了，也可以一起计算长字符串的宽度。

想了解怎么计算元素精确尺寸的参考上一篇博客：http://blog.csdn.net/zy1281539626/article/details/78488062

Js获取字符串的显示宽度/高度的更多相关文章

  1. js 获取字符串的 像素 宽度 ----字符串格式化输出

    function getLenPx(str, font_size) { var str_leng = str.replace(/[^\x00-\xff]/gi, 'aa').length; retur ...

  2. js获取不同浏览器盒子宽度高度

    DTD 已声明 IE document.documentElement.scrollHeight 浏览器所有内容高 度 ,document.body.scrollHeight 浏览器所有内容高度 do ...

  3. JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)_javascript技巧_

    JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)_javascript技巧_--HTML5中文学习网 http://www.html5cn.com.cn/shili/javascripts/79 ...

  4. js获取当前时间显示在页面上

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  5. JS获取字符串长度(区分中英文)

    JS获取字符串长度(区分中英文) 中文算2个字,英文一个. function getStrLength(str) {      var cArr = str.match(/[^\x00-\xff]/i ...

  6. js获取字符串字节数方法小结

    js获取字符串字节数的方法.分享给大家供大家参考.具体如下: 大家都知道,获取字符串的长度可用length来获取,那么获取这段字符串的字节数呢? 英文字母肯定lenght和字节数都一样:都是1而中文l ...

  7. JS获取图片的原始宽度和高度

    页面中的img元素,想要获取它的原始尺寸,以宽度为例,可能首先想到的是元素的innerWidth属性,或者jQuery中的width()方法.如下: <img id="img" ...

  8. jq 获取各个元素的宽度高度的方法

    JS获取各种宽度.高度的简单介绍: scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获 ...

  9. js获取浏览器当前窗口的高度长度

    js获取浏览器可见区域(不包括标题栏.地址栏.收藏夹栏状态栏等额外区域,仅为页面呈现区域)的高度和宽度宽度:document.documentElement.clientWidth高度:documen ...

随机推荐

  1. git推送远程仓库以及分支介绍

    1.介绍 我们要把本地仓库的项目推送到远程服务器,首先我们得有自己的服务器,一般我们选择码云和github,码云和github的操作差不多,今天我们再次介绍码云的使用 2.码云的使用 第一步:首先我们 ...

  2. API网关从入门到放弃

    前言 假设你正在开发一个电商网站,那么这里会涉及到很多后端的微服务,比如会员.商品.推荐服务等等. 那么这里就会遇到一个问题,APP/Browser怎么去访问这些后端的服务? 如果业务比较简单的话,可 ...

  3. vue警告： component lists rendered with v-for should have explicit keys

    warning信息:component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide ...

  4. 使用Rabbit MQ消息队列

    使用Rabbit MQ消息队列 综合概述 消息队列 消息队列就是一个消息的链表,可以把消息看作一个记录,具有特定的格式以及特定的优先级.对消息队列有写权限的进程可以向消息队列中按照一定的规则添加新消息 ...

  5. [bzoj4368][IOI2015]boxes纪念品盒_动态规划_单调队列_贪心

    bzoj4368 IOI2015 boxes纪念品盒 题目链接:https://lydsy.com/JudgeOnline/problem.php?id=4368 数据范围:略. 题解: 如果在一个最 ...

  6. K8S从入门到放弃系列-(8)kube-apiserver 高可用配置

    摘要: 前面几篇文章,就是整个的master节点各组件的部署,上面我们提到过,k8s组件中,kube-controller-manager.kube-scheduler及etcd这三个服务高可用,都是 ...

  7. Linux（CentOS 7）下安装postgres

    事情背景:需要在Linux上安装postgres数据库,但安装目录想直接指定,所以想通过源码编译安装pg 首先下载源码安装包.源码下载地址:https://github.com/postgres/po ...

  8. C++函数的应用

    函数的相关语法 函数的一般定义形式如下: 返回类型 函数名([参数表])   //函数头 {                                                 //函数体 ...

  9. Python——类和对象（二）

    一.实例方法和自动绑定self 在类中定义的实例方法,Python会自动绑定方法的第一个参数(通常是self,下文也默认为self),第一个参数总会指向调用该方法的对象,因为实例方法(包括构造方法)第 ...

  10. Redis过期命令

    Redis键的过期时长的设定 ·命令名称:EXPIRE ·语法:EXPIRE key seconds ·功能:为给定key设置生存时间,当key过期时(生存时间为0),它会被自动删除 ·返回值:设置成 ...