Finden Sie die Breite eines Auto-Größe Element

Question

Grundsätzlich brauche ich die Breite einer Spanne. Um mehrere benutzerdefinierte Zeichen zu verwenden, die nicht auf einer Tastatur gefunden werden, erstelle ich mein eigenes "Eingabe" -Feld mit einem "div". Jedes Zeichen wird in ein "span" -Tag eingeschlossen, an das ein Ereignis-Listener angehängt ist. Dadurch kann der Benutzer auf eine beliebige Stelle in der Zeichenfolge klicken und den Cursor an eine Position hinter einem Zeichen bewegen. Außerdem können Zeichen in der Mitte einer Zeichenfolge hinzugefügt oder gelöscht werden.

Ich benutze "offsetLeft" und "offsetWidth", um die rechte Seite eines Zeichens zu finden, das Problem ist, wenn ein Zeichen/Bereich angeklickt wird, ist die "offsetWidth" weg. Wenn ich zum Beispiel eine 14-Pixel-Schriftart verwende, wird ein "M" als 35 Pixel breit zurückkommen, wenn es tatsächlich 11 Pixel ist. Und es gibt mehrere Variationen, ein durchschnittlich großes Zeichen wie ein "S" wird bei 26 Pixeln zurückkommen, wenn es tatsächlich 9 ist. Es gibt also Variationen in der Dimensionierung. Jetzt magst du dich fragen, wie ich die tatsächliche Buchstabengröße gefunden habe und das Firebug verwendet hat. Was, wenn Firebug es finden kann, würde ich annehmen, kann ich, ich habe gerade nicht herausgefunden, wie. Ich hoffe also, dass hier jemand weiß.

Ich habe auch versucht mit "getComputedStyle" und "currentStyle, um die Breite zu finden und es gibt" auto ". Auch versucht getBoundingClientRect(). Breite es gleich OffsetWidth, mit dem Unterschied, dass es auch die Brüche eines Pixels findet in der Breite, so dass ein „M“ ist 35,366668701171875 Pixel breit, ungerade

EDIT:.

Basierend auf user1289347 Post soll ich habe festgestellt, dass die „offset“ die „offsetleft“ verursacht durch die fehlerhafte Menge aus sein

Answer 1

Versuchen Sie jquery width() es berechnet die Dombreite ziemlich gut jedes Mal, wenn ich es benutzt habeindiskutabel

Und wenn jquery ist

Erstelle ein DIV mit den folgenden Arten gestylt. Legen Sie in Ihrem JavaScript die Schriftgröße und die Attribute fest, die Sie messen möchten, setzen Sie Ihre Zeichenfolge in das DIV und lesen Sie dann die aktuelle Breite und Höhe des DIV. Es wird sich dehnen, um den Inhalt anzupassen, und die Größe wird innerhalb einiger Pixel der gerenderten Zeichenkettengröße liegen.

HTML:

<div id="Test"> 
abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</div> 

CSS:

#Test 
{ 
    position: absolute; 
    visibility: hidden; 
    height: auto; 
    width: auto; 
} 

JavaScript (Fragment):

var test = document.getElementById("Test"); 
test.style.fontSize = fontSize; 
var height = (test.clientHeight + 1) + "px"; 
var width = (test.clientWidth + 1) + "px"; 

Dies wird eine separate prüfbar div mit Ihrem Test erstellen, Kredit hier Calculate text width with JavaScript Es ist ein viel Arbeit, aber es sollte Ihnen bessere Ergebnisse bringen, indem Sie außerhalb Ihres bestehenden Markups arbeiten.