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获取各种屏幕的宽度和高度
JS获取各种屏幕的宽度和高度描述用法网页可见区域宽 document.body.clientWidth 网页可见区域高 document.body.clientHeight 网页可见区域宽 do ...
JS获取元素的大小（高度和宽度）
JS获取元素的大小(高度和宽度) 在 JavaScript中,使用下面 3 组属性可以获取元素的高度和宽度.如表所示. 元素尺寸属性说明 clientWidth 获取元素可视部分的宽度,即 CSS ...
js获取浏览器窗口页面宽度、高度的方法 kaki 的博客
js获取浏览器窗口页面宽度.高度的方法不多说,直接上代码 alert($(window).height()); //浏览器时下窗口可视区域高度 alert($(document).height()) ...
原生js获取html元素高度,js获取页面及个元素高度、宽度的代码
网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offs ...
js获取当前时间显示在页面上
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
js 获取字符串中最后一个斜杠前面/后面的内容
js 获取字符串中最后一个斜杠后面的内容: var str = "/asdasf/asfaewf/agaegr/trer/rhh"; var index = str .lastIn ...
[js] 获取浏览器当前页面的滚动条高度的兼容写法
[js] 获取浏览器当前页面的滚动条高度的兼容写法 document.documentElement.scrollTop || document.body.scrollTop; 个人简介我是歌谣,欢 ...
js获取字符串的字节数
2012-08-28 16:50 js获取字符串的字节数 var lenFor = function(str){ var byteLen=0,len=str.length; if(str){ for( ...
js获取字符串字符数和字节数，注意：区分字符串字符数和字节数（编程环境UTF-8的情形）
1.字符串字符数: 直接str.length即可获取 2.字符串字节数: js获取字符串字节长度小技巧:https://blog.csdn.net/likun952345407/article/det ...

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

Js获取字符串的显示宽度/高度相关推荐

最新文章

热门文章