JS 获取文本宽度

发表于 2023-01-12 更新于 2023-03-21 分类于 JavaScript
本文字数： 575 阅读时长 ≈ 1 分钟

使用js获取文本宽度

function getTextWidth(text, font) {
  // re-use canvas object for better performance
  var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
  var context = canvas.getContext("2d");
  context.font = font;
  var metrics = context.measureText(text);
  return metrics.width;
}

通过创建div，然后获取宽度

function getTextWidth(text, font) {
  var span = document.createElement("span");
  span.style.font = font;
  span.innerHTML = text;
  document.body.appendChild(span);
  var width = span.offsetWidth;
  document.body.removeChild(span);
  return width;
}