Wie kann man jQuery dazu bringen, den von .width () zurückgegebenen Wert nicht zu runden?

Ich habe mich umgesehen und konnte das nicht finden. Ich versuche, die Breite eines Div zu ermitteln, aber wenn es einen Dezimalpunkt hat, rundet es die Zahl.

Beispiel:

#container{
    background: blue;
    width: 543.5px;
    height: 20px;
    margin: 0;
    padding: 0;
}

Wenn ich das tue $('#container').width();, wird 543 statt 543.5 zurückgegeben. Wie kann ich erreichen, dass die Zahl nicht gerundet wird und die volle 543.5 (oder welche Zahl auch immer) zurückgegeben wird?

Verwenden Sie den nativen Element.getBoundingClientRectund nicht den Stil des Elements. Es wurde in IE4 eingeführt und wird von allen Browsern unterstützt:

$("#container")[0].getBoundingClientRect().width

Hinweis: Informationen zu IE8 und niedriger finden Sie in den Hinweisen zu "Browserkompatibilität" in den MDN-Dokumenten.

$("#log").html(
  $("#container")[0].getBoundingClientRect().width
);

#container {
    background: blue;
    width: 543.5px;
    height: 20px;
    margin: 0;
    padding: 0;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container"></div>
<p id="log"></p>

Ich wollte hier nur meine Erfahrung hinzufügen, obwohl die Frage alt ist: Der obige Konsens scheint zu sein, dass die Rundung von jQuery genauso gut ist wie eine ungerundete Berechnung - aber das scheint bei etwas, das ich getan habe, nicht der Fall zu sein .

Mein Element hat im Allgemeinen eine flüssige Breite, aber der Inhalt ändert sich dynamisch über AJAX. Vor dem Wechseln des Inhalts sperre ich vorübergehend die Abmessungen des Elements, damit mein Layout während des Übergangs nicht herumspringt. Ich habe festgestellt, dass mit jQuery wie folgt:

$element.width($element.width());

verursacht etwas Spaß, als ob es Subpixel-Unterschiede zwischen der tatsächlichen Breite und der berechneten Breite gibt. (Insbesondere wird ein Wort von einer Textzeile zur nächsten springen, das angibt, dass die Breite geändert und nicht nur gesperrt wurde.) Aus einer anderen Frage - Ermitteln der tatsächlichen Gleitkommabreite eines Elements - habe ich herausgefunden out, window.getComputedStyle(element).widthdas eine ungerundete Berechnung zurückgibt. Also habe ich den obigen Code in so etwas wie geändert

var e = document.getElementById('element');
$('#element').width(window.getComputedStyle(e).width);

Und mit DIESEM Code - kein lustiges Hüpfen! Diese Erfahrung scheint darauf hinzudeuten , dass der unrounded Wert tatsächlich tut Angelegenheit an den Browser, nicht wahr? (In meinem Fall Chrome Version 26.0.1410.65.)

Die Antwort von Ross Allen ist ein guter Ausgangspunkt, aber bei Verwendung von getBoundingClientRect (). Width werden auch die Auffüllung und die Rahmenbreite berücksichtigt, was bei der Breitenfunktion der Abfrage nicht der Fall ist :

Das zurückgegebene TextRectangle-Objekt enthält den Abstand, die Bildlaufleiste und den Rand, schließt jedoch den Rand aus. In Internet Explorer umfassen die Koordinaten des Begrenzungsrechtecks ​​den oberen und linken Rand des Clientbereichs.

Wenn Sie den widthWert präzise ermitteln möchten, müssen Sie die Polsterung und den Rand folgendermaßen entfernen:

var a = $("#container");
var width = a[0].getBoundingClientRect().width;

//Remove the padding width (assumming padding are px values)
width -= (parseInt(a.css("padding-left")) + parseInt(a.css("padding-right")));

//Remove the border width
width -= (a.outerWidth(false) - a.innerWidth());

Sie können dafür verwenden getComputedStyle:

parseFloat(window.getComputedStyle($('#container').get(0)).width)

Verwenden Sie Folgendes, um eine genaue Breite zu erhalten:

var htmlElement=$('class or id');
var temp=htmlElement[0].style.width;