如何计算一个span里文本的宽度？

Question

下面的方式可以获取到

 const span = document.createElement('span')
 span.className = 'getTextWidth'
 span.innerText = str
 document.querySelector('body').appendChild(span)
 width = document.querySelector('.getTextWidth').offsetWidth
 document.querySelector('.getTextWidth').remove()

但是getComputedStyle(span).width的方式得到的结果是auto，原因是什么呢？

Answer 1

我想题主的意思应该是为什么 offsetWidth 属性能获取到实际宽度，而 getComputedStyle() 得到的是 auto

通过 offsetWidth 属性获取的是元素的 实际宽度 ，即包括边框、内边距和内容区域的宽度。这个属性返回的是一个数值，表示元素在页面上所占据的宽度。

而通过 getComputedStyle() 方法获取的是应用在元素上的 样式属性值 ，其中包括CSS样式表中定义的各种属性。

对于没有显式设置宽度的元素，默认情况下其宽度会被浏览器解析为 "auto" 。在题主提供的代码中，span元素没有 显式设置 宽度，所以返回值为 "auto" 。

注：

getComputedStyle() 不能保证获取的是真实宽度，它仅仅只是得到css属性罢了

const span = document.createElement('span')
span.className = 'getTextWidth'
span.innerText = '测试'
span.style.width = '123px' // span作为行内元素，宽度不生效
document.querySelector('body').appendChild(span)
let width = document.querySelector('.getTextWidth').offsetWidth
let width2 = parseFloat(getComputedStyle(span).width) // 注意width属性是字符串
document.querySelector('.getTextWidth').remove()

console.log(width); // 32 span真实宽度
console.log(width2); // 123 我们所设置的宽度