Js获取字符串的显示宽度/高度
重点:
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获取字符串的显示宽度/高度的更多相关文章
- js 获取字符串的 像素 宽度 ----字符串格式化输出
function getLenPx(str, font_size) { var str_leng = str.replace(/[^\x00-\xff]/gi, 'aa').length; retur ...
- js获取不同浏览器盒子宽度高度
DTD 已声明 IE document.documentElement.scrollHeight 浏览器所有内容高 度 ,document.body.scrollHeight 浏览器所有内容高度 do ...
- JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)_javascript技巧_
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)_javascript技巧_--HTML5中文学习网 http://www.html5cn.com.cn/shili/javascripts/79 ...
- js获取当前时间显示在页面上
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- JS获取字符串长度(区分中英文)
JS获取字符串长度(区分中英文) 中文算2个字,英文一个. function getStrLength(str) { var cArr = str.match(/[^\x00-\xff]/i ...
- js获取字符串字节数方法小结
js获取字符串字节数的方法.分享给大家供大家参考.具体如下: 大家都知道,获取字符串的长度可用length来获取,那么获取这段字符串的字节数呢? 英文字母肯定lenght和字节数都一样:都是1而中文l ...
- JS获取图片的原始宽度和高度
页面中的img元素,想要获取它的原始尺寸,以宽度为例,可能首先想到的是元素的innerWidth属性,或者jQuery中的width()方法.如下: <img id="img" ...
- jq 获取各个元素的宽度高度的方法
JS获取各种宽度.高度的简单介绍: scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获 ...
- js获取浏览器当前窗口的高度长度
js获取浏览器可见区域(不包括标题栏.地址栏.收藏夹栏状态栏等额外区域,仅为页面呈现区域)的高度和宽度宽度:document.documentElement.clientWidth高度:documen ...
随机推荐
- 2019－10－24 李宗盛 spss作业
3.1数据排序. 在统计分析时最初的变量. 可能不符合统计分析的要求,需要用户对目标数据进行整理,来符合分析方法个案排序.数据——个案排序.排序依据,排序顺序,变量排序 数据——变量排序 变量视图 ...
- JS通过ActiveX读写ini配置文件
String.prototype.trim = function(){ return this.replace(/(^\s+)|(\s+$)/g, ''); }; IniConfig = functi ...
- 最新 世纪龙java校招面经 （含整理过的面试题大全）
从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.世纪龙等10家互联网公司的校招Offer,因为某些自身原因最终选择了世纪龙.6.7月主要是做系统复习.项目复盘.LeetCo ...
- FZU - 2295 Human life （最大权闭合子图）
题目链接 FZU - 2295 Human life 题目分析 题意:你在玩一个游戏,在其中你可以通过学习一些技能,但是学习某些技能之前,可能还要学习一些其他的技能,并且学习任何技能都有一定的花费: ...
- Django 关联查询
查询id=1的XXXXX关联的YYYYY信息 a = XXXXX.objects.get(id=1) a.YYYYY.all() 查询id=1的YYYYY关联的XXXXX信息 b = YYYYY.ob ...
- 少儿编程Scratch第四讲：射击游戏的制作，克隆的奥秘
上周的宇宙大战射击游戏中,我们只完成了宇宙飞船发射子弹的部分.还未制作敌对方.这周制作了敌方-飞龙,飞龙随机在屏幕上方出现,如果被子弹打中,则得分,飞龙和子弹都消失. 敌方:飞龙:计分. 目的 目的: ...
- Ubuntu Server 18.04 无法修改 hostname
对于运维而言,我们希望每台服务器的 hostname 都能体现出它自己的功能/ip,方便排查. ubuntu server live 18.04 的安装流程非常友好,从 ip 到 hostname 都 ...
- Neo4j查询语句总结
最近一直在做图数据库的相关工作,对neo4j的查询语言Cypher使用较多,故在此总结记录.Cypher作为图数据库的查询语言,感觉和关系型数据库的查询语言sql差不多吧. 1.如何找到一个节点x,x ...
- CCF 201809-1 卖菜
题目: 问题描述 在一条街上有n个卖菜的商店,按1至n的顺序排成一排,这些商店都卖一种蔬菜. 第一天,每个商店都自己定了一个价格.店主们希望自己的菜价和其他商店的一致,第二天,每一家商店都会根据他自己 ...
- Java并发（思维导图）
1,线程状态转换 无限期等待: 限期等待: 线程生命流程: 2,实现方式 代码实现样例[三种方式]: package com.cnblogs.mufasa.demo2; import java.uti ...