分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > IT知识

JS怎么计算html标签里文字的宽度

发布时间:2023-09-06 01:24责任编辑:苏小强关键词:暂无标签
方法: 做一个空的html 标签 id为“ruler”,样式为“position:absolute;visibility: hidden; white-space: nowrap;z-index: -100”;

    目的为了不影响页面,只是用来放你要测的文字的宽度,得到目标文字的内容,大小和字体.放到如下方法就行了:
      
String.prototype.visualLength = function(size,family) ???      { ???????    var ruler = $("#ruler").css({ ???????????    "font-size":size || "inherit", ???????????  "font-family":family || "inherit" ??????     }); ???????  ruler.text(this); ???????  return ruler.width(); ??      }

 实例如下:

<!DOCTYPE html><html><head></head><style> ???#ruler { ???????position:absolute; ???????visibility: hidden; ???????white-space: nowrap; ???????z-index: -100; ???}</style><body><span id="ruler">test</span><span >tasdfasdfasdfest</span><script src="./jquery.min.js"></script><script> ???String.prototype.visualLength = function(size,family) ???{ ???????var ruler = $("#ruler").css({ ???????????"font-size":size || "inherit", ???????????"font-family":family || "inherit" ???????}); ???????ruler.text(this); ???????return ruler.width(); ???} ???var text = "tasdfasdfasdfest"; ???var len = text.visualLength("16px"); ???console.log(len)</script></body></html>

  

JS怎么计算html标签里文字的宽度

原文地址:http://www.cnblogs.com/flxy-1028/p/7813836.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved