问题
Is there any way to determine the pixel length of a string in jQuery/JavaScript?
回答1:
Wrap text in a span and use jquery width()
回答2:
The contexts used for HTML Canvases have a built in method for checking the size of a font. This method returns a TextMetrics
object, which has a width property which contains the width of the text.
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;
}
Or, as some of the other users have suggested, you can wrap it in a span
element:
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:
- First solution (canvas) - tested, working (returns in pixels)
- Second solution (DOM) - tested, working (returns in pixels)
Note that because of implementation differences, the two may return slightly different values.
Performance test: 26788 calls averaged over 100 iterations. Tested on late 2014 mac mini, 1.4 GHz i5
Safari, version 10.1.1 (12603.2.4):
- First solution: 33.92 milliseconds for 26788 invocations
- Second solution: 67.94 milliseconds for 26788 invocations
Google Chrome, version 60.0.3112.90:
- First solution: 99.1963 milliseconds for 26788 invocations
- Second solution: 307.4605 milliseconds for 26788 invocations
回答3:
I don't believe you can do just a string, but if you put the string inside of a <span>
with the correct attributes (size, font-weight, etc); you should then be able to use jQuery to get the width of the span.
<span id='string_span' style='font-weight: bold; font-size: 12'>Here is my string</span>
<script>
$('#string_span').width();
</script>
回答4:
Put it in an absolutely-positioned div then use clientWidth to get the displayed width of the tag. You can even set the visibility to "hidden" to hide the 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>
回答5:
Based on vSync's answer, the pure javascript method is lightning fast for large amount of objects. Here is the Fiddle: https://jsfiddle.net/xeyq2d5r/8/
[1]: https://jsfiddle.net/xeyq2d5r/8/ "JSFiddle"
I received favorable tests for the 3rd method proposed, that uses the native javascript vs HTML Canvas
Google was pretty competive for option 1 and 3, 2 bombed.
FireFox 48:
Method 1 took 938.895 milliseconds.
Method 2 took 1536.355 milliseconds.
Method 3 took 135.91499999999996 milliseconds.
Edge 11
Method 1 took 4895.262839793865 milliseconds.
Method 2 took 6746.622271896686 milliseconds.
Method 3 took 1020.0315412885484 milliseconds.
Google Chrome: 52
Method 1 took 336.4399999999998 milliseconds.
Method 2 took 2271.71 milliseconds.
Method 3 took 333.30499999999984 milliseconds.
回答6:
First replicate the location and styling of the text and then use Jquery width() function. This will make the measurements accurate. For example you have css styling with a selector of:
.style-head span
{
//Some style set
}
You would need to do this with Jquery already included above this script:
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();
Needless to say
theWidthYouWant
will hold the pixel length. Then remove the created elements after you are done or you will get several if this is done a several times. Or add an ID to reference instead.
回答7:
If you use Snap.svg, the following works:
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
来源:https://stackoverflow.com/questions/2057682/determine-pixel-length-of-string-in-javascript-jquery