Obtenir le réel à virgule flottante de la largeur d'un élément

Je suis en utilisant jQuery (v1.7.1) et j'ai besoin d'obtenir l'absolu, floating-point de la largeur d'un élément, mais tout de jQuery largeur méthodes semblent être des arrondissements la valeur de la largeur.

Par exemple, si la largeur d'un élément a été 20.333333px, jQuery largeur de la méthode renvoie 20, j'.e en ignorant la valeur décimale.

Vous pouvez voir ce que je veux dire sur ce jsFiddle

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

  • double possible de Ne pas rond .largeur() en jQuery
  • Voudrez peut-être consulter ici: stackoverflow.com/questions/4308989/... Semble le navigateur tronque les pixels, donc c'est probablement pas un problème avec le jquery.
  • jquery largeur de la fonction de retour de valeur int ainsi, vous n'aurez jamais une valeur flottante. voir api.jquery.com/width
  • Merci @JohnKoerner, je ne pouvais pas trouver cette question avant, mais je me demande encore si il pourrait être n'importe quelle solution? D'une certaine façon à récupérer le floating-point de la largeur d'un élément, puisque la propriété CSS ne semble pas être la tenue de celle-ci (Au-moins, quand je inspecter avec le Chrome de la console)
  • merci à vous, jsfiddle.net/q5BQs/3 assez bien montre que les valeurs décimales sont totalement ignorés lors du rendu des éléments, bien que ces valeurs sont conservées sur le Chrome de la console.
  • Quand quelque chose est affichée, elle ne peut être affichée sur un ensemble de pixels de la frontière. Il n'y a pas une telle chose comme un demi-pixel de largeur.

InformationsquelleAutor Sathvik | 2012-08-10
  1. 67

    Si vous avez déjà une référence à l'élément DOM, élément .getBoundingClientRect vous obtiendrez les valeurs que vous voulez.

    La méthode existe depuis Internet Explorer 4, et il est sûr à utiliser partout. Cependant, la width et height attributs n'existent que dans IE9+. Vous devez calculer si vous soutien à 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 dans google Chrome, 28, et les différences sont plus importantes dans Firefox: http://jsperf.com/getcomputedstyle-vs-getboundingclientrect

    • Selon Mozilla developper Network : getBoundingClientRect() a été introduite depuis ie4 mais width et height propriétés n'ont été introduites sur ie9. Donc, pour ie8 vous devez calculer top - bottom et right - left. Rien d'important, juste pour être tout à fait précis.
    • Je n'avais pas réalisé qu'; merci pour ça. Je vais ajouter des précisions à ma réponse.
    • Cela ne fait pas travailler pour ie9. Dans ie9 getBoundingClientRect renvoie des valeurs arrondies, plutôt que de virgule flottante, la largeur de la personne voulait. La seule façon d'obtenir une valeur précise dans ie9 est à l'aide de getComputedStyle. jsfiddle.net/JoolsCaesar/z6bx2moh
    • petite correction, il doit être bottom - top en hauteur, sinon vous vous retrouverez avec un nombre négatif.
    • Pouvez-vous jeter un oeil à cette mise à jour de Violon et de m'aider si vous savez comment faire cela ? thx. jsfiddle.net/z6bx2moh/18 je suis en train d'essayer d'obtenir le floating-point de la largeur d'un élément dynamique de la largeur et qui est rempli...
    • doit être display:inline ou display:inline-block. Si vous ne pouvez pas changer cela, vous aurez besoin d'ajouter une autre div wrapper, à l'intérieur de #inner et autour de vos articles, qui possède l'un de ces display valeurs. jsfiddle.net/JoolsCaesar/z6bx2moh/21

    InformationsquelleAutor Ross Allen
  2. 14

    Essayez ceci:

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

    Mis à jour le violon: http://jsfiddle.net/johnkoer/Z2MBj/18/

    • Oui, je vois, la largeur calculée est arrondi (jsfiddle.net/Z2MBj/19 au-moins sur Chrome). jsfiddle.net/q5BQs/3, montre que plus visuellement.
    • getBoundingClientRect est jusqu'à 70% plus rapide que getComputedStyle et fournit les mêmes dimensions: jsperf.com/getcomputedstyle-vs-getboundingclientrect
    • Pour ajouter à @ssorallen commentaire, getComputedStyle renvoie une chaîne où que getBoundingClientRect renvoie un float.
    • getBoundingClientRect ne renvoie pas la même valeur que getComputedStyle, si l'élément est affecté par tout les transformations CSS puis getBoundingClientRect sera le retour de la transformée de valeur.
    • Dans IE9 getBoundingClientRect renvoie des valeurs arrondies et getComputedStyle renvoie les valeurs à virgule flottante (une fois passé à travers parseFloat) pour se débarrasser de la "px". jsfiddle.net/JoolsCaesar/z6bx2moh
    • pour ce que ça vaut, j'ai juste couru quelques repères dans google chrome, et getComputedStyle() a été plus rapide que getBoundingClientRect()

    InformationsquelleAutor John Koerner