web-dev-qa-db-fra.com

Obtention de la largeur réelle en virgule flottante d'un élément

J'utilise jQuery (v1.7.1) et j'ai besoin d'obtenir la largeur absolue en virgule flottante d'un élément, mais toutes les méthodes de largeur de jQuery semblent arrondir la valeur de la largeur.

Par exemple, si la largeur réelle d'un élément était 20.333333px, la méthode width de jQuery renvoie 20, c'est-à-dire en ignorant la valeur décimale.

Vous pouvez voir ce que je veux dire à ce sujet jsFiddle

Donc, ma question est: comment puis-je obtenir la valeur à virgule flottante de la largeur d'un élément?

jquerycssfloating-pointwidth
44
Sathvik

Si vous avez déjà une référence à l'élément DOM, element.getBoundingClientRect vous obtiendra les valeurs souhaitées.

La méthode existe depuis Internet Explorer 4 et il est donc sûr de l'utiliser partout. Cependant, les attributs width et height n'existent que dans IE9 +. Vous devez les calculer si vous supportez IE8 et ci-dessous:

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

var width;
if (rect.width) {
  // `width` is available for IE9+
  width = rect.width;
} else {
  // Calculate width for IE8 and below
  width = rect.right - rect.left;
}

getBoundingClientRect est 70% plus rapide que window.getComputedStyle in Chrome 28, et les différences sont plus importantes dans Firefox: http://jsperf.com/getcomputedstyle-vs-getboundingclientrect

65
Ross Allen

Essaye ça:

var element = document.getElementById("a");
alert(window.getComputedStyle(element).width);

Violon mis à jour: http://jsfiddle.net/johnkoer/Z2MBj/18/

13
John Koerner