如何使用JavaScript计算指定元素1ch单位对应的像素长度？

首先明确一点：目前浏览器没有提供直接读取任意元素ch单位与px换算比例的标准JS API——ch单位的计算完全依赖元素实际生效的字体渲染规则，和字体族、字号、字重、字距调整、字体特性设置甚至系统级文本渲染配置都有关系，你认为是“hack”的DOM测量思路，本质上是最贴合ch单位定义、结果最准确的实现方式，只是可以通过写法优化做到完全无侵入、无DOM污染，不需要保留永久节点，也不会影响页面性能。

最优无侵入实现方案 #

这个方案不会在页面中残留任何额外节点，测量过程不会造成可见的布局抖动，结果精度足够高：

function getOneChInPx(targetElement = document.body) {
  // 创建临时测量节点
  const probe = document.createElement('span');
  const targetStyle = window.getComputedStyle(targetElement);

  // 完全继承目标元素的字体相关属性，保证测量环境一致
  probe.style.font = targetStyle.font;
  probe.style.fontFeatureSettings = targetStyle.fontFeatureSettings;
  probe.style.fontKerning = targetStyle.fontKerning;
  probe.style.fontVariantLigatures = targetStyle.fontVariantLigatures;

  // 节点脱离正常文档流，移出可视区，不影响页面布局
  probe.style.position = 'absolute';
  probe.style.left = '-9999in';
  probe.style.visibility = 'hidden';
  probe.style.whiteSpace = 'nowrap';
  probe.style.width = 'auto';

  // 填充100个0字符，通过平均计算消除亚像素渲染误差
  probe.textContent = '0'.repeat(100);
  document.body.append(probe);

  const chPxValue = probe.offsetWidth / 100;
  // 测量完成立刻销毁节点，无残留
  probe.remove();

  return chPxValue;
}

这个方案相比你提到的两种思路有几个明显优势：

• 不需要提前在页面预埋永久隐藏的测量节点，不会增加初始DOM冗余
• 临时节点用完即删，不会对现有DOM结构造成任何污染
• 完整继承目标元素所有和文本渲染相关的样式，不是只测量全局默认的ch值，哪怕目标元素用了自定义字体、特殊字距配置也能拿到准确结果
• 通过100个字符取平均值的方式，规避了浏览器亚像素渲染带来的单字符测量误差，结果精度远高于测量单个0的实现
• 测量节点设置了绝对定位和visibility: hidden，插入时不会触发页面大面积重排，性能开销可以忽略不计

其他可选方案的局限性 #

你可能会想到用canvas的measureTextAPI绕过DOM测量，这种写法看起来更“干净”，但存在准确性问题：

// 不推荐：测量结果和DOM实际渲染值可能存在偏差
function getOneChInPxByCanvas(targetElement = document.body) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  ctx.font = window.getComputedStyle(targetElement).font;
  return ctx.measureText('0').width;
}

canvas的文本渲染逻辑和DOM文本渲染并不完全一致，在字体抗锯齿、字距调整、自定义字体加载状态判定上都可能存在差异，拿到的结果和浏览器实际计算ch单位用的值可能有1px以内的偏差，不适合对精度要求高的场景。

注意：如果目标元素使用了未加载完成的Web自定义字体，一定要等字体加载完成后再调用测量函数，否则会拿到 fallback 字体下的错误结果，可以搭配document.fonts.ready等待字体加载完毕再执行测量。

内容的提问来源于stack exchange，提问作者tim-mccurrach