Comment faire en sorte que jQuery ne arrondisse pas la valeur retournée par .width ()?

J'ai cherché et je n'ai pas trouvé ça. J'essaie d'obtenir la largeur d'un div, mais s'il a un point décimal, il arrondit le nombre.

Exemple:

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

Si je le fais, $('#container').width();il retournera 543 au lieu de 543,5. Comment faire pour ne pas arrondir le nombre et renvoyer le 543,5 complet (ou quel que soit le nombre).

Utilisez le natif Element.getBoundingClientRectplutôt que le style de l'élément. Il a été introduit dans IE4 et est pris en charge par tous les navigateurs:

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

Remarque: pour IE8 et les versions antérieures, reportez-vous aux notes «Compatibilité du navigateur» dans la documentation 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 réponse de Ross Allen est un bon point de départ, mais utiliser getBoundingClientRect (). Width inclura également le remplissage et la largeur de la bordure, ce qui n'est pas le cas de la fonction width de jquery :

L'objet TextRectangle retourné inclut le remplissage, la barre de défilement et la bordure, mais exclut la marge. Dans Internet Explorer, les coordonnées du rectangle englobant incluent les bordures supérieure et gauche de la zone cliente.

Si votre intention est d'obtenir la widthvaleur avec la précision, vous devrez supprimer le remplissage et la bordure comme ceci:

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

Je voulais juste ajouter mon expérience ici, bien que la question soit ancienne: le consensus ci-dessus semble être que l'arrondi de jQuery est en fait aussi bon qu'un calcul non arrondi - mais cela ne semble pas être le cas dans quelque chose que j'ai fait .

Mon élément a une largeur fluide, généralement, mais un contenu qui change dynamiquement via AJAX. Avant de changer de contenu, je verrouille temporairement les dimensions de l'élément afin que ma mise en page ne rebondisse pas pendant la transition. J'ai trouvé que l'utilisation de jQuery comme ceci:

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

provoque une certaine drôle, comme il y a des différences de sous-pixels entre la largeur réelle et la largeur calculée. (Plus précisément, je vais voir un mot sauter d'une ligne de texte à une autre, indiquant que la largeur a été modifiée, pas seulement verrouillée.) D'une autre question - Obtenir la largeur réelle en virgule flottante d'un élément - j'ai trouvé qui window.getComputedStyle(element).widthrenverra un calcul non arrondi. J'ai donc changé le code ci-dessus en quelque chose comme

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

Et avec CE code - pas de rebond drôle! Cette expérience semble indiquer que la valeur unrounded effectivement fait affaire au navigateur, non? (Dans mon cas, Chrome Version 26.0.1410.65.)

Vous pouvez utiliser getComputedStylepour cela:

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

Utilisez ce qui suit pour obtenir une largeur précise:

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