dlsjs 文档站

Chinese

English

Chinese

English

夜间模式

getTextWidth ​

getTextWidth 函数用于计算指定文本在给定字体大小下渲染时占据的宽度。

语法 ​

javascript
getTextWidth(str)
getTextWidth(str, fontSize)

参数 ​

  • str string
    • 需要计算宽度的文本内容。
  • fontSize string
    • 字体大小，默认值为 '14px'。该值会作为 span 元素的 style.fontSize 使用，需符合 CSS 字体大小语法（如 '12px'、'1rem'）。

返回值 ​

number

返回文本渲染后的像素宽度。

描述 ​

getTextWidth 通过临时创建一个 span 元素，将文本写入并设置对应的字体大小后挂载到 document.documentElement，读取其 offsetWidth 作为文本宽度，最后移除该临时元素。

由于需要将元素加入文档流才能获取真实渲染尺寸，函数会触发一次重排（reflow）。

注意事项 ​

  1. 函数会临时修改 DOM，挂载并移除一个 span 元素。频繁调用可能引起页面重排，影响性能。
  2. 默认仅设置了 fontSize，未设置字体族（font-family）和字重（font-weight），若需精确测量，建议提前在目标上下文中保持一致的字体设置。
  3. 文本中的换行符、空白符等会影响渲染结果，计算时请按实际渲染场景传入文本。
  4. 该函数依赖 offsetWidth，元素必须挂载到文档中且不可设置 display:none，函数内部已确保挂载。

示例 ​

基本用法 ​

指定字体大小 ​

浏览器兼容性 ​

  • 该函数依赖 document.createElement、offsetWidth 和 DOM 操作，兼容所有现代浏览器。
  • offsetWidth 为标准属性，在 IE9+ 及所有现代浏览器中均可用。

性能考虑 ​

  • 时间复杂度: O(1) - 单次创建、读取、移除操作。
  • 重排开销: 每次调用会触发一次重排，若需批量测量多个文本，建议合并测量以减少重排次数。
  • 函数内部没有缓存机制，重复测量相同文本会重复操作 DOM。

相关函数 ​