Javascript Girl
  1. Javascript Girl
  3. Convertit la chaîne de largeur css en nombre régulier
Intereting Posts
Bouton vidéo html5 qui prend la vidéo à un moment précis L'expression de la fonction appelée immédiatement lance "l'objet n'est pas une fonction" Cryptage côté client via HTTP avec Diffie-Hellman Key Exchange et AES Dans Firefox et IE, comment changer le curseur tout en faisant glisser différentes cibles? L'enveloppe console.log qui conserve les numéros de ligne et prend en charge la plupart des méthodes? Comment insérer JSON arbitraire dans l'étiquette de script HTML Comment gérer le menu déroulant de sélection multiple – JQuery JQuery obtient un texte brut (non modifié) pour un complément d'analyse via des modèles de soulignement Une meilleure façon d'obtenir du temps en millisecondes en javascript? Syntaxe Array.from () vs spread Microsoft CDN pour jQuery ou Google CDN? Trouver un élément enfant de parent javascript pur Google signInCallback est appelé deux fois lorsque l'utilisateur est signé. Comment travailler correctement avec Timezone? L'interface étend la fonctionnalité de la chaîne

Convertit la chaîne de largeur css en nombre régulier

En essayant de calculer la largeur d'un élément caché, j'ai constaté que jquery.width () renvoie 0 pour la largeur de ces éléments.

J'ai découvert que l'utilisation de jquery.css ('width') renverrait la largeur correcte en utilisant la largeur du style déclaré (même si cette valeur est différente de la feuille de style initiale). Le problème est que la méthode css ('width') renvoie une chaîne, généralement en mode "100px". Ma question se résout en: comment récupérer le numéro de la chaîne "100px"? Y a-t-il un moyen facile?

Si elle revient toujours en format px, "100px", "50px", etc. (c'est-à-dire pas "em" ou pourcentage), vous pourriez 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 suffixe "px", donc vous devriez être prêt à aller.

Bien que profondément, je pense que quelque chose n'est pas correct si $ ("# myelem"). Width () ne fonctionne pas.

Remarque sur les éléments cachés.

Si vous ajoutez jQuery pour améliorer progressivement votre page, l'élément que vous calculez devrait être visible lorsque la première page est chargée. Vous devriez donc avoir la largeur avant de cacher l'élément. En faisant cela, $ ("# myelem"). Width () fonctionnera. 

 var myWidth = 0; $(document).ready( function () { myWidth = $("#myelem").width(); $("#myelem").hide(); });

Vous pouvez supprimer des numéros non numériques avec une expression régulière, puis simplement convertir en un nombre. Cela fonctionne, peu importe la définition de la largeur ( px , em , % , pt ). Préserve également les décimales.

Vanilla javascript 

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

JQuery 

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

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

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

Je tiens à .width() car il obtient effectivement la largeur calculée au lieu de la largeur css. Au lieu de le cacher avec .hide() ( display: none ), vous pouvez le cacher avec .css('visible', 'hidden') alors .width() devrait fonctionner.

De mon commentaire Si vous ne souhaitez pas modifier votre .hide() , alors vous pourriez appliquer visible: hidden et ensuite .show() , puis mesurez la hauteur. Après l'avoir mesuré, inversez cela. Les objets affectent toujours la disposition de la page lorsqu'ils sont cachés par visible: hidden – méfiez-vous de cela.

Pour éviter les étiquettes qui dérangent avec la mise en page, vous pouvez définir la position absolue, la déplacer vers l'étiquette du corps, puis mesurer.

En version simple JavaScript: 

 parseInt('100px', 10)

Fonctionne avec "100em", "100%", et même avec: "100". Pas besoin de modèles d'expression régulière.