在Javascript / jQuery中确定string的像素长度？
有没有什么办法来确定jQuery / JavaScript中string的像素长度？
将文本换行跨度并使用jquery width（）
用于HTML Canvases的上下文具有用于检查字体大小的内置方法。 此方法返回一个TextMetrics对象，该对象具有包含文本宽度的width属性。
function getWidthOfText(txt, fontname, fontsize){ if(getWidthOfText.c === undefined){ getWidthOfText.c=document.createElement('canvas'); getWidthOfText.ctx=getWidthOfText.c.getContext('2d'); } getWidthOfText.ctx.font = fontsize + ' ' + fontname; return getWidthOfText.ctx.measureText(txt).width; }
或者，正如其他一些用户所build议的那样，您可以将其包装在一个span元素中：
function getWidthOfText(txt, fontname, fontsize){ if(getWidthOfText.e === undefined){ getWidthOfText.e = document.createElement('span'); getWidthOfText.e.style.display = "none"; document.body.appendChild(getWidthOfText.e); } getWidthOfText.e.style.fontSize = fontsize; getWidthOfText.e.style.fontFamily = fontname; getWidthOfText.e.innerText = txt; return getWidthOfText.e.offsetWidth; }
testing：
- 第一个解决scheme（canvas） – testing ， 工作 （返回像素）
- 第二种解决scheme（DOM） – testing ， 工作 （以像素为单位）
请注意，由于实施的不同，二者可能会返回稍有不同的值。
性能testing：26788次调用平均超过100次。 testing2014年末Mac mini，1.4 GHz i5
Safari 10.1.1版（12603.2.4）：
- 第一个解决scheme：26788个调用的时间为33.92毫秒
- 第二种解决scheme：26788个调用的时间为67.94毫秒
谷歌浏览器，版本60.0.3112.90：
- 第一个解决scheme：26788个调用的时间为99.1963毫秒
- 第二种解决scheme：26788个调用的时间为307.4605毫秒
我不相信你只能做一个string，但是如果你把string放在一个带有正确属性（大小，字体重量等）的<span> ， 那么你应该可以使用jQuery来获取跨度的宽度。
<span id='string_span' style='font-weight: bold; font-size: 12'>Here is my string</span> <script> $('#string_span').width(); </script>
把它放在绝对定位的div，然后使用clientWidth获取标签的显示宽度。 你甚至可以将可见性设置为“隐藏”来隐藏div：
<div id="text" style="position:absolute;visibility:hidden" >This is some text</div> <input type="button" onclick="getWidth()" value="Go" /> <script type="text/javascript" > function getWidth() { var width = document.getElementById("text").clientWidth; alert(" Width :"+ width); } </script>
基于vSync的回答，纯javascript方法对于大量的对象来说是闪电般的。 这是小提琴： https : //jsfiddle.net/xeyq2d5r/8/
[1]: https://jsfiddle.net/xeyq2d5r/8/ "JSFiddle"
我收到了第三种方法的有利testing，使用原生javascript vs HTML Canvas
Google对于选项1和3以及2轰炸都很有竞争力。
火狐48：
方法1花了938.895毫秒。
方法2花了1536.355毫秒。
方法3花了135.91499999999996毫秒。
边缘11方法1花了4895.262839793865毫秒。
方法2花了6746.622271896686毫秒。
方法3花了1020.0315412885484毫秒。
Google Chrome：52
方法1花了336.4399999999998毫秒。
方法2花了2271.71毫秒。
方法3花了333.30499999999984毫秒。
首先复制文本的位置和样式，然后使用jquery width（）函数。 这将使测量准确。 例如，你有一个select器的CSS样式：
.style-head span { //Some style set }
你需要使用这个脚本上面已经包含的Jquery来做到这一点：
var measuringSpan = document.createElement("span"); measuringSpan.innerText = 'text to measure'; measuringSpan.style.display = 'none'; /*so you don't show that you are measuring*/ $('.style-head')[0].appendChild(measuringSpan); var theWidthYouWant = $(measuringSpan).width();
不用说
theWidthYouWant
将保持像素长度。 然后在完成后删除已创build的元素，否则如果完成了几次，将会得到几个元素。 或者添加一个ID来引用。
如果您使用Snap.svg，以下工作：
var tPaper = Snap(300, 300); var tLabelText = tPaper.text(100, 100, "label text"); var tWidth = tLabelText.getBBox().width; // the width of the text in pixels. tLabelText.attr({ x : 150 - (tWidth/2)}); // now it's centered in x
