Bepaal de pixellengte van de string in Javascript/jQuery?

Is er een manier om de pixellengte van een string in jQuery/JavaScript te bepalen?

Antwoord 1, autoriteit 100%

Wikkel tekst in een spanen gebruik jquery width()

Antwoord 2, autoriteit 98%

De contexten die worden gebruikt voor HTML Canvassen hebben een ingebouwde methode om de grootte van een lettertype te controleren. Deze methode retourneert een object TextMetricsmet een eigenschap width die de breedte van de tekst bevat.

function getWidthOfText(txt, fontname, fontsize){
    if(getWidthOfText.c === undefined){
        getWidthOfText.c=document.createElement('canvas');
        getWidthOfText.ctx=getWidthOfText.c.getContext('2d');
    }
    var fontspec = fontsize + ' ' + fontname;
    if(getWidthOfText.ctx.font !== fontspec)
        getWidthOfText.ctx.font = fontspec;
    return getWidthOfText.ctx.measureText(txt).width;
}

Of, zoals sommige andere gebruikers hebben gesuggereerd, je kunt het in een span-element plaatsen:

function getWidthOfText(txt, fontname, fontsize){
    if(getWidthOfText.e === undefined){
        getWidthOfText.e = document.createElement('span');
        getWidthOfText.e.style.display = "none";
        document.body.appendChild(getWidthOfText.e);
    }
    if(getWidthOfText.e.style.fontSize !== fontsize)
        getWidthOfText.e.style.fontSize = fontsize;
    if(getWidthOfText.e.style.fontFamily !== fontname)
        getWidthOfText.e.style.fontFamily = fontname;
    getWidthOfText.e.innerText = txt;
    return getWidthOfText.e.offsetWidth;
}

EDIT 2020: caching van lettertypenaam+grootte toegevoegd op voorstel van Igor Okorokov.

Antwoord 3, autoriteit 18%

Ik geloof niet dat je zomaar een string kunt maken, maar als je de string in een <span>plaatst met de juiste attributen (grootte, font-weight, etc); je zou dan jQuery moeten kunnen gebruiken om de breedte van de overspanning te krijgen.

<span id='string_span' style='font-weight: bold; font-size: 12'>Here is my string</span>
<script>
  $('#string_span').width();
</script>

Antwoord 4, autoriteit 10%

Zet het in een absoluut gepositioneerde div en gebruik clientWidth om de weergegeven breedte van de tag te krijgen. Je kunt de zichtbaarheid zelfs op “verborgen” zetten om de div te verbergen:

<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>

Antwoord 5, autoriteit 10%

Op basis van het antwoord van vSync is de pure javascript-methode razendsnel voor een groot aantal objecten.
Hier is de viool: https://jsfiddle.net/xeyq2d5r/8/

[1]: https://jsfiddle.net/xeyq2d5r/8/ "JSFiddle"

Ik heb gunstige tests ontvangen voor de derde voorgestelde methode, die gebruikmaakt van het native javascript versus HTML Canvas

Google was behoorlijk concurrerend voor optie 1 en 3, 2 gebombardeerd.

FireFox 48:
Methode 1 duurde 938,895 milliseconden.
Methode 2 duurde 1536.355 milliseconden.
Methode 3 duurde 135,914999999999996 milliseconden.

Rand 11
Methode 1 duurde 4895,262839793865 milliseconden.
Methode 2 duurde 6746.622271896686 milliseconden.
Methode 3 duurde 1020.0315412885484 milliseconden.

Google Chrome: 52
Methode 1 duurde 336.4399999999998 milliseconden.
Methode 2 duurde 2271,71 milliseconden.
Methode 3 duurde 333.30499999999984 milliseconden.

Antwoord 6, autoriteit 5%

Repliceer eerst de locatie en stijl van de tekst en gebruik vervolgens de functie Jquery width(). Hierdoor worden de metingen nauwkeurig.
U heeft bijvoorbeeld css-styling met een selector van:

.style-head span
{
  //Some style set
}

Je zou dit moeten doen met JQuery die al boven dit script is opgenomen:

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();

Onnodig te zeggen

theWidthYouWant

houdt de pixellengte vast. Verwijder vervolgens de gemaakte elementen nadat u klaar bent of u krijgt er meerdere als dit meerdere keren wordt gedaan. Of voeg in plaats daarvan een ID toe om te verwijzen.

Antwoord 7

Misschien is het voor sommigen nuttig

const getMaxPixelsOfStrings = ({ strings, styles = {} }) => {
  const spans = strings.map(str => {
    const span = document.createElement('span')
    span.append(str)
    Object.assign(span.style, {
      position: 'absolute',
      ...styles,
    })
    return span
  })
  document.querySelector('html').prepend(...spans)
  const maxPixels = Math.max(...spans.map(span => span.getBoundingClientRect().width))
  spans.forEach(span => span.remove())
  return maxPixels
}

gebruik

getMaxPixelsOfStrings({
            strings: ['One', 'Two', 'Three', 'Four', 'Five'],
            styles: {
              fontSize: '18px',
              letterSpacing: '1px',
            },
          })

Antwoord 8

Als je Snap.svg gebruikt, werkt het volgende:

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