Js获取字符串的显⽰宽度⾼度
重点:
1.在H5页⾯，⽂字⼤⼩单位为rem
2.不同的font-family，⽂字的宽度不⼀样
3.⽂字宽度同时受font-size和font-family影响
思路：
在页⾯动态创建⼀个节点，设置节点的font-size,font-family，还有内容，然后获取它的宽度。节点宽度必须随内容变化⽽变化，所以使⽤display:inline-block 为了避免禅城误差，使⽤ getComputedStyle ⽅法来计算宽度，具体原因看上⼀篇博客：
blog.csdn/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" >abcdefg</span>
<script src="jquery.min.js"></script>
<script>
function textSize(fontSize,fontFamily,text){
var span = ateElement("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(Content != "undefined"){
}else{
span.innerText = text;
}
result.width = ComputedStyle(span).width) - result.width;
result.height = ComputedStyle(span).height) - result.height;
return result;
}js验证字符串长度
console.log(textSize("20px","Arial","abcdefg"));
</script>
</body>
</html>
对⽐⽂字精确宽度如图：
函数计算得到的宽度：
宽⾼⾮常精确，⽤这种⽅法就可以计算在H5页⾯中当前字体字号的每个字符的宽度了，也可以⼀起计算
长字符串的宽度。想了解怎么计算元素精确尺⼨的参考上⼀篇博客：blog.csdn/zy1281539626/article/details/78488062

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。