获取 DOM 实际宽度 offsetWidth | 文本宽度 measureText

dom.offsetWidth 获取的是div的宽度

获取文本宽度

// 通过 measureText 计算
function getActualWidthOfChars(text, size = 14, family = "Microsoft YaHei") {
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");
  ctx.font = `${size}px ${family}`;
  const metrics = ctx.measureText(text);
  const actual = Math.abs(metrics.actualBoundingBoxLeft) + Math.abs(metrics.actualBoundingBoxRight);
  return Math.max(metrics.width, actual);
}

测试Demo

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>测试table自适应</title>
</head>

<body>
  <h1>下方内容变化，动态获取长度</h1>
  <p id="inner-text" style="width: 520px; overflow: hidden; white-space: nowrap; font-size: 14px;"></p>
  <p id="auto-text" style="border: solid 1px red; font-size: 14px;"></p>
  <div class="show"></div>
  <script>
    const textDom = document.getElementById('inner-text')
    const autoTextDom = document.getElementById('auto-text')
    const showDom = document.getElementsByClassName('show')[0]
    setInterval(() => {
      textDom.innerText = '海胆 .7~^@，aA'.repeat(Math.random() * 50)
      let autoWidth = getActualWidthOfChars(textDom.innerText)
      autoTextDom.innerText = textDom.innerText
      autoTextDom.style.width = autoWidth + 'px'
      // 添加 dom 显示
      let pDom = document.createElement('p')
      pDom.innerText = `${textDom.offsetWidth} ${autoWidth}`
      showDom.appendChild(pDom)
    }, 1500)

    // 通过 measureText 计算
    function getActualWidthOfChars(text, size = 14, family = "Microsoft YaHei") {
      const canvas = document.createElement("canvas");
      const ctx = canvas.getContext("2d");
      ctx.font = `${size}px ${family}`;
      const metrics = ctx.measureText(text);
      const actual = Math.abs(metrics.actualBoundingBoxLeft) + Math.abs(metrics.actualBoundingBoxRight);
      return Math.max(metrics.width, actual);
    }
  </script>
</body>
</html>
posted @ 2023-03-07 10:52  海胆Sur  阅读(51)  评论(0)    收藏  举报  来源