大家可能会碰到这样一个需求：一个容器的宽度固定，当内容的宽度超过容器的宽度时鼠标移入显示提示框，不超过时则不显示。
这个时候就需要知道内容到底多宽。
一 、估计法
假设文字大小是14px，如果字符的长度是10，那么内容的宽度大概是14*10=140，这种方法显然误差很大，数字，特殊字符，英文字母，汉字的大小各不相同。
二、真实计算法
利用offsetWidth获取宽度
有时我们在计算宽度的时候，可能无法获取父节点的dom对象，这个时候怎么办呢？
代码：
function getTextWidth(text, fontSize) {
// 创建临时元素
let span = document.createElement('span');
// 放入文本
span.innerHTML = text;
// 设置文字大小
span.style.fontSize = fontSize + 'px'
// span元素转块级
span.style.position = 'absolute'
// 加入特殊的类
span.setAttribute('class','className');
// span放入body中
document.body.appendChild(span)
// 获取span的宽度
let width = span.offsetWidth
// 从body中删除该span
document.body.removeChild(span)
return width;
}
let str = '哈哈哈哈哈哈hhhhhh,。.,%$^!@(*&%^12345';
getTextWidth(str，15);
总的思路就是：在计算方法里创建字符串的容器span，在把span挂载到body下，再利用
offsetWidth获取宽度，然后再移除span。
如果字符串有特殊的类，也要把类名加到span上，这样计算的宽度才准确。
计算高度的方法也类似。
本资源由随笔博客发布。发布者：五维国度，转载请注明出处：http://blog.suibi.site/archives/4315
本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
微信扫一扫 
