Convertir css largeur de la chaîne d'ordinaire nombre

Tout en essayant de calculer la largeur d'un élément masqué, j'ai trouvé que jquery.largeur() renvoie 0 pour que les éléments' de largeur.

J'ai trouvé que l'utilisation de jquery.css('width') retourne la largeur correcte en utilisant la déclaration de style de largeur (même si cette valeur est différente de la première feuille de style). Le problème est que le css('width') méthode retourne une chaîne de caractères, généralement dans un "100px" de la mode. Ma question se résout en: comment faire pour récupérer le numéro de la "100px" chaîne de caractères?
Est-il un moyen facile?

  • Modification: L'élément que j'essaie de calculer la largeur est redimensionnable et peut être caché pendant l'exécution, par conséquent, sa largeur sera finalement changer de.
InformationsquelleAutor vitorhsb | 2010-08-20
  1. 26

    Si elle revient toujours en px format, "100px", "50px" etc (c'est à dire pas "em" ou en pourcentage), vous pouvez simplement...

    var width = parseInt($("#myelem").css("width"),10); //always use a radix

    ou

    var width = parseInt(element.style.width,10); //always use a radix

    Il ignore le "px" suffixe de sorte que vous devriez être bon d'aller.

    Même si au fond je pense que quelque chose n'est pas juste, si $("#myelem").largeur() ne fonctionne pas.

    Note sur les éléments cachés.

    Si vous êtes l'ajout de jQuery à renforcer progressivement la page, l'élément le calcul doit être visible lorsque la page se charge. Donc, vous devriez obtenir la largeur avant de masquer l'élément. Ce faisant, $("#myelem").largeur() fonctionne.

    var myWidth = 0;

$(document).ready( function () {
    myWidth = $("#myelem").width();
    $("#myelem").hide();
});
    • La raison pour laquelle .width() ne fonctionne pas, c'est que si des objets sont cachés par .hide() ( display: none ), ils ne contribuent pas à la mise en page et donc n'ont pas de largeur.
    • Ah. Je vais fournir une solution pour que...
    • L'élément que j'essaie de calculer la largeur est redimensionnable et peut être caché pendant l'exécution, par conséquent, sa largeur sera finalement changer de. Donc, comme vous l'avez suggéré, je peux utiliser une variable pour stocker la valeur qui est calculée sur la page .ready() événement et à chaque redimensionnement de rappel de l'événement, je dois re-calculer - utilisation d' .width() - et d'appliquer la nouvelle valeur. Par conséquent, même lorsque l'élément est caché, je vais avoir de la valeur actuelle.
    • Number($elem.css('width').replace(/[^\d\.]/g, '')); - une expression régulière combinée avec une conversion en nombre résout le px/em/% problème.
    InformationsquelleAutor Fenton
  2. 2

    Vous pouvez supprimer non-numericals avec une expression régulière, et puis il suffit de convertir en nombre. Ce fonctionne peu importe la façon dont vous définissez la largeur (px, em, %, pt). Préserve les points décimaux trop.

    vanille javascript

    Number(elem.style.width.replace(/[^\d\.\-]/g, ''));

    jQuery 

    Number($elem.css('width').replace(/[^\d\.\-]/g, ''));
    InformationsquelleAutor hofnarwillie
  3. 2

    Dans la plaine JavaScript:

    parseInt('100px', 10)

    Fonctionne avec des "100em", "100%", et même: "100". Pas nécessaire pour tous les modèles d'Expression Régulière.

    InformationsquelleAutor jony
  4. 1

    Oh, je suis venu avec:

    new Number($elem.css('width').slice(0, -2));
    //to extract the 'px' and return a regular number

    Maintenant, j'espère seulement que jquery retourne toujours la même chaîne de la mode: "100px"

    • Il le fera si vous avez défini tous comme px. Toutefois, si vous avez des largeurs comme %, elle va revenir comme 50% et votre tranche fonction de couper le chiffre droite. Vous pouvez utiliser indexOf pour tester px pour la sécurité.
    • ou vous pouvez supprimer les non-numericals avec une expression régulière. Ce fonctionne peu importe la façon dont vous définissez la largeur (px, em, %, pt) js: Number(elem.style.width.replace(/[^\d\.]/g, '')); ou jQuery: Number($elem.css('width').replace(/[^\d\.]/g, ''));
    InformationsquelleAutor vitorhsb
  5. 0

    Je m'en tiendrais à .width() parce qu'il obtient réellement la largeur calculée au lieu de css largeur. Au lieu de la masquer avec .hide() ( display: none ), vous pouvez le cacher avec .css('visible', 'hidden') puis .width() devrait fonctionner.

    de mon commentaire
    Si vous ne voulez pas changer votre .hide()s vous pouvez alors appliquer le visible: hidden et par la suite .show() et puis de mesurer la hauteur. Après avoir mesuré, inverser la. Objets affecte encore la mise en page lorsqu'ils sont cachés par visible: hidden - méfiez-vous de cela.

    Pour éviter les balises qui mess avec la mise en page, vous pouvez définir la position à l'absolu, le déplacer vers le corps de la balise, puis mesurer.

    • Je suis d'accord pour utiliser la largeur calculée. En fait, l'élément qui était caché dans le chargement de la page de l'événement, en plus d'un peu plus de <code>.hide</code>. J'ai modifié le css de "display: none" à "visibility: hidden" et puis j'ai lu les mêmes valeurs à l'aide de <code>.largeur()</code>. Super. Maintenant, j'ai tous avez à faire est de changer tous les <code>.hide()</code> extraits dans votre suggéré <code>.css('visible', 'hidden')</code>. Je soupçonne que j'ai aussi besoin de changer le <code>.show()</code> en <code>.css('visibilité', 'visible')</code>. Merci.
    • Au lieu de faire tout ce travail. Vous pouvez alors appliquer le visible: hidden et par la suite .show() et puis de mesurer la largeur. Après avoir mesuré, inverser la. Alors vous ne devez pas faire changer beaucoup de choses. Objets affecte encore la page lorsqu'ils sont cachés par visible: hidden - méfiez-vous de cela.
    InformationsquelleAutor Lasse Espeholt