Jak sprawić, by jQuery nie zaokrąglała wartości zwracanej przez .width ()?

Szukałem wokół i nie mogłem tego znaleźć. Próbuję uzyskać szerokość elementu div, ale jeśli ma przecinek dziesiętny, zaokrągla liczbę.

Przykład:

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

Jeśli to zrobię $('#container').width();, zwróci 543 zamiast 543,5. Jak sprawić, żeby nie zaokrąglił liczby i zwrócił pełne 543,5 (lub jakąkolwiek inną liczbę).

Użyj natywnego Element.getBoundingClientRectzamiast stylu elementu. Został wprowadzony w IE4 i jest obsługiwany przez wszystkie przeglądarki:

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

Uwaga: W przypadku IE8 i starszych, zobacz uwagi „Zgodność z przeglądarkami” w dokumentacji MDN.

$("#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>

Odpowiedź Rossa Allena jest dobrym punktem wyjścia, ale użycie getBoundingClientRect (). Width będzie również obejmować dopełnienie i szerokość obramowania, co nie jest w przypadku funkcji width jquery :

Zwrócony obiekt TextRectangle zawiera dopełnienie, pasek przewijania i obramowanie, ale wyklucza margines. W programie Internet Explorer współrzędne prostokąta ograniczającego obejmują górną i lewą granicę obszaru roboczego.

Jeśli Twoim zamiarem jest uzyskanie widthwartości z precyzją, musisz usunąć wypełnienie i obramowanie w następujący sposób:

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

Chciałem tylko dodać tutaj moje doświadczenie, chociaż pytanie jest stare: powyższy konsensus wydaje się być taki, że zaokrąglanie jQuery jest tak samo dobre jak niezaokrąglone obliczenia - ale nie wydaje się, aby tak było w przypadku czegoś, co robiłem .

Mój element ma ogólnie płynną szerokość, ale zawartość zmienia się dynamicznie za pośrednictwem AJAX. Przed przełączeniem zawartości tymczasowo blokuję wymiary elementu, aby mój układ nie podskakiwał podczas przejścia. Odkryłem, że używając jQuery w następujący sposób:

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

powoduje to trochę zabawne, na przykład różnice między rzeczywistą szerokością a obliczoną szerokością są subpikselowe. (Konkretnie, zobaczę, jak słowo przeskakuje z jednego wiersza tekstu do drugiego, wskazując, że szerokość została zmieniona, a nie tylko zablokowana.) Z innego pytania - Pobieranie rzeczywistej, zmiennoprzecinkowej szerokości elementu - znalazłem to window.getComputedStyle(element).widthzwróci niezaokrąglone obliczenia. Więc zmieniłem powyższy kod na coś takiego

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

A z TYM kodem - bez zabawnego odbijania! To doświadczenie wydaje się sugerować, że niezaokrąglona wartość ma znaczenie dla przeglądarki, prawda? (W moim przypadku Chrome w wersji 26.0.1410.65.)

Możesz użyć getComputedStyledo tego:

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

Użyj poniższych, aby uzyskać dokładną szerokość:

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