【JS】计算任意字符串的像素宽度(px)

文章目录

代码实现

函数封装:

ts 复制代码
export function getStringWidthDOM(
  str: string,
  {
    fontSize = '16px',
    fontFamily = 'Segoe UI Emoji, Segoe UI Symbol',
    fontWeight = 'normal',
    fontStyle = 'normal',
  }: { fontSize?: string; fontFamily?: string; fontWeight?: string | number; fontStyle?: string },
): number {
  const span = document.createElement('span');
  span.style.cssText = `
      position: absolute;
      visibility: hidden;
      white-space: nowrap;
      font-size: ${fontSize};
      font-family: ${fontFamily};
      font-weight: ${fontWeight};
      font-style: ${fontStyle};
    `;
  span.textContent = str;
  document.body.appendChild(span);
  const width = span.offsetWidth;
  document.body.removeChild(span);
  return width;
}

使用案例:

ts 复制代码
const width: number = getStringWidthDOM('Hello, TS!', {
  fontSize: '14px',
  fontWeight: 'bold'
});
相关推荐
咖啡の猫18 分钟前
Vue初始化脚手架
前端·javascript·vue.js
拉不动的猪2 小时前
如何处理管理系统中(Vue PC + uni-app 移动端):业务逻辑复用基本方案
前端·javascript·架构
边洛洛2 小时前
next.js项目部署流程
开发语言·前端·javascript
非凡ghost2 小时前
Syncovery Premium(文件同步软件)
前端·javascript·后端
神膘护体小月半2 小时前
bug 记录 - 路由守卫 beforeRouteLeave 与 confirm 结合,不生效问题
javascript·vue
岁月宁静2 小时前
Vue 3.5 + WangEditor 打造智能笔记编辑器:语音识别功能深度实现
前端·javascript·vue.js
非凡ghost2 小时前
BiliLive-tools(B站录播一站式工具) 中文绿色版
前端·javascript·后端
非凡ghost3 小时前
bkViewer小巧精悍数码照片浏览器 中文绿色版
前端·javascript·后端
西洼工作室3 小时前
前端监控:错误捕获与行为日志全解析
前端·javascript
huangql5203 小时前
JavaScript数据结构实战指南:从业务场景到性能优化
javascript·数据结构·性能优化