Convert css width string in reguläre Nummer

Question

Beim Versuch, die Breite eines ausgeblendeten Elements zu berechnen, habe ich festgestellt, dass jquery.width() 0 für die Breite dieser Elemente zurückgibt.

Ich fand heraus, dass die Verwendung von jquery.css ('width') die richtige Breite zurückgab, indem die angegebene Formatbreite verwendet wurde (auch wenn dieser Wert vom ursprünglichen Stylesheet abweicht). Das Problem ist, dass die Methode css ('width') eine Zeichenfolge zurückgibt, im Allgemeinen in einer "100px" -Methode. Meine Frage löst sich auf: Wie kann ich die Nummer aus der "100px" -Zeichenfolge abrufen? Gibt es einen einfachen Weg?

Answer 1

Wenn es immer in Pixel-Format zurückgibt, "100px", "50px" usw. (also nicht "em" oder Prozent), konnte man nur ...

var width = parseInt($("#myelem").css("width"),10); // always use a radix 

oder

var width = parseInt(element.style.width,10); // always use a radix 

Es ignoriert das Suffix "px", also sollten Sie gut gehen.

Obwohl tief in mir denke ich, dass etwas nicht stimmt, wenn $ ("# myelem"). Width() funktioniert nicht.

Hinweis zu versteckten Elementen.

Wenn Sie jQuery hinzufügen, um Ihre Seite progressiv zu erweitern, sollte das Element, das Sie berechnen, beim ersten Laden der Seite sichtbar sein. Sie sollten also die Breite erhalten, bevor Sie das Element zunächst ausblenden. Auf diese Weise funktioniert $ ("# myelem"). Width().

var myWidth = 0; 

$(document).ready(function() { 
    myWidth = $("#myelem").width(); 
    $("#myelem").hide(); 
}); 

Answer 2

Oh, kam ich mit:
new Number($elem.css('width').slice(0, -2));
//to extract the 'px' and return a regular number

Jetzt habe ich nur hoffen, dass Jquery durchweg die gleiche Zeichenfolge Art und Weise zurückgibt: „100px“

Answer 3

ich .width() bleiben würde, weil es die tatsächlich bekommt berechnete Breite statt CSS-Breite. Anstatt es mit (display: none) zu verstecken, können Sie es mit .css('visible', 'hidden') verstecken, dann sollte .width() funktionieren.

von meinem Kommentar Wenn Sie wollen Sie nicht ändern Sie Ihre .hide() die dann visible: hidden anwenden könnten und danach .show() und dann die Höhe messen. Nachdem Sie es gemessen haben, kehren Sie das um. Objekte wirken sich immer noch auf das Seitenlayout aus, wenn sie von visible: hidden ausgeblendet werden - Vorsicht.

Um Tags zu vermeiden, die mit dem Layout verwechselt werden, können Sie die Position auf absolut setzen, sie zum Body-Tag bewegen und dann messen.

Answer 4

Sie könnten Nicht-Numerische mit einem regulären Ausdruck entfernen und dann nur in eine Zahl umwandeln. Dies funktioniert unabhängig von der Definition der Breite (px, em, %, pt). Behält auch Dezimalpunkte bei.

Vanille javascript

Number(elem.style.width.replace(/[^\d\.\-]/g, '')); 

jQuery

Number($elem.css('width').replace(/[^\d\.\-]/g, '')); 

Answer 5

Im Klar JavaScript:

parseInt('100px', 10) 

Werke mit "100em", "100%", und sogar mit : "100". Keine Notwendigkeit für irgendwelche regulären Ausdrucksmuster.