Come fare in modo che jQuery non arrotondi il valore restituito da .width ()?

Ho cercato in giro e non sono riuscito a trovarlo. Sto cercando di ottenere la larghezza di un div, ma se ha un punto decimale arrotonda il numero.

Esempio:

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

Se lo faccio $('#container').width();restituirà 543 invece di 543,5. Come faccio a non arrotondare il numero e restituire il 543,5 completo (o qualunque sia il numero).

Usa il nativo Element.getBoundingClientRectpiuttosto che lo stile dell'elemento. È stato introdotto in IE4 ed è supportato da tutti i browser:

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

Nota: per IE8 e versioni precedenti, vedere le note "Compatibilità browser" nei documenti 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>

La risposta di Ross Allen è un buon punto di partenza, ma l'uso di getBoundingClientRect (). Width includerà anche il padding e la larghezza del bordo che non è il caso della funzione width di jquery :

L'oggetto TextRectangle restituito include il riempimento, la barra di scorrimento e il bordo, ma esclude il margine. In Internet Explorer, le coordinate del rettangolo di delimitazione includono i bordi superiore e sinistro dell'area client.

Se il tuo intento è ottenere il widthvalore con la precisione, dovrai rimuovere il padding e il bordo in questo modo:

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

Volevo solo aggiungere la mia esperienza qui, anche se la domanda è vecchia: il consenso sopra sembra essere che l'arrotondamento di jQuery è effettivamente altrettanto buono come un calcolo non arrotondato, ma non sembra essere il caso in qualcosa che ho fatto .

Il mio elemento ha una larghezza fluida, in generale, ma il contenuto cambia dinamicamente tramite AJAX. Prima di cambiare il contenuto, blocco temporaneamente le dimensioni dell'elemento in modo che il mio layout non rimbalzi durante la transizione. Ho scoperto che usando jQuery in questo modo:

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

sta causando un po 'di curiosità, come se ci fossero differenze di pixel secondari tra la larghezza effettiva e la larghezza calcolata. (In particolare, vedrò una parola saltare da una riga di testo a un'altra, indicando che la larghezza è stata modificata, non solo bloccata.) Da un'altra domanda - Ottenere l'effettiva larghezza in virgola mobile di un elemento - Ho trovato out che window.getComputedStyle(element).widthrestituirà un calcolo non arrotondato. Quindi ho cambiato il codice sopra in qualcosa di simile

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

E con QUEL codice - nessun rimbalzo divertente!Quell'esperienza sembra suggerire che il valore non arrotondato è davvero importante per il browser, giusto? (Nel mio caso, Chrome versione 26.0.1410.65.)

Puoi usare getComputedStyleper questo:

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

Utilizzare quanto segue per ottenere una larghezza precisa:

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