Création d'un élément html avec jquery, comment puis-je obtenir la largeur d'un élément?

Question

Je crée l'élément HTML en utilisant jQuery comme ceci:

var newListItem = $("<li>" + variableName + "</li>"); 

    var widthOfNewItem = newListItem.width(); //<-- will return 0 

Comment puis-je trouver cette nouvelle largeur des éléments? J'essaie d'appeler newListItem.width() mais cela renvoie 0.

Answer 1

Pourquoi aurait-il une largeur si elle n'existe nulle part sur la page? Sa largeur sera définie par sa taille de conteneur et css. Jusqu'à présent, vous ne l'avez pas ajouté à quoi que ce soit, alors il flotte juste dans les limbes JS.

Answer 2

Vous n'avez pas encore placé l'élément dans le DOM. Vous avez simplement créé un élément et l'avez stocké dans une variable. Ajoutez-le à quelque chose comme:

$('ul').append(newListItem); 

Vérifiez ensuite sa largeur.

Answer 3

vous pouvez obtenir la largeur d'un élément en utilisant offsetWidth; vous pouvez également obtenir la hauteur d'un élément en utilisant offsetWidth; par exemple:

var obj = document.getElementById('Your_Element_ID') ; 
var width = obj.offsetWidth ; 
var height = obj.offsetHeight ; 

Answer 4

Si vous avez besoin de la largeur avant qu'elle ne s'affiche, vous pouvez l'ajouter à un conteneur avec visibilité: masqué. Cela vous permet de vérifier la largeur sans afficher l'élément.