Comment obtenir une largeur d'élément en javascript
Dans la phase de test d'une page Web ou du site Web lors de la conception, obtenir les dimensions des éléments inclus dans le modèle d'objet de document (DOM) est d'une grande aide pour ajuster diverses fonctionnalités ajoutées et les formater en conséquence. Cette approche se traduit également par la distinction d'un site Web en le rendant lisible et une conception globale de documents accessibles.
Cet article démontrera les méthodes à considérer pour calculer la largeur d'un élément en JavaScript.
Comment obtenir la largeur d'un élément en javascript?
La largeur d'un élément peut être calculée en JavaScript en utilisant les approches suivantes:
- "Offsetwidth" propriété.
- "ClientWidth" propriété.
- "getBoundingClientRect ()" méthode.
Ces approches seront désormais discutées en détail une par une!
Méthode 1: Obtenez la largeur de l'élément en JavaScript en utilisant la propriété OffsetWidth
Cette propriété peut être appliquée pour accéder à un élément contre le récupéré "identifiant»Et calculez sa largeur extérieure.
Présentation l'exemple suivant pour la démonstration.
Exemple
Tout d'abord, incluez un «
Ensuite, contenez l'image spécifiée dans le «div«Élément associé à un«identifiant»:
Après cela, accédez à l'image contenue et appliquez le «Offsetwidth»Propriété pour calculer la largeur de l'image:
var getElement = document.getElementByid ('img').OffsetWidth;
Après le calcul, accédez à la section d'en-tête spécifiée avant et affichez la largeur de l'image à l'aide du «texte de texte" propriété:
var get = document.GetElementByid ("tête")
obtenir.innerText = "La largeur de l'élément est:" + getElement;
obtenir.innerText = "La largeur de l'élément est:" + largeur;
Sortir
Méthode 2: Obtenez la largeur de l'élément en JavaScript en utilisant la ClientWidth
Propriété
Cette propriété peut également être mise en œuvre similaire à l'approche précédente. La principale différence est qu'il calcule la largeur intérieure de l'élément spécifié.
Exemple
Tout d'abord, relancez les méthodes discutées ci-dessus pour inclure un titre:
Obtenez la largeur de l'élément HTML en utilisant JavaScript
Dans cet exemple particulier, incluez la rubrique spécifiée contenue dans le «div»Élément spécifié par«identifiant". Cette rubrique particulière sera calculée pour «largeur»:
Ceci est un élément de tête
Cette balise particulière se réfère à la largeur calculée pour être affichée sur DOM:
<H4 id = "statut">H4><BR>
Maintenant, créez un bouton avec un "sur clic»Événement invoquant la fonction getWidth ():
Enfin, définissez une fonction nommée «getWidth ()". Ici, récupérez la rubrique sur la largeur. Dans l'étape suivante, appliquez le «ClientWidth«Propriété pour effectuer l'opération indiquée et, de même, le«texte de texte”La propriété affichera la largeur de l'en-tête:
fonction getWidth ()
var getElement = document.getElementByid («myelement»);
var get = document.getElementByid ("statut")
var largeur = getElement.ClientWidth;
obtenir.innerText = "La largeur de l'élément est" + largeur + "px";
Sortir
Méthode 3: Obtenez la largeur de l'élément en JavaScript en utilisant la méthode GetBoundingClientRect ()
Cette méthode renvoie la taille d'un élément. Cette méthode peut être intégrée au «largeur»Propriété pour mesurer la largeur du champ de saisie.
Regardez l'exemple suivant.
Exemple
Tout d'abord, contenir une entrée "texte"Champ avec la valeur d'espace réservé spécifié et l'événement ci-joint"onduir»:
Maintenant, définissez une fonction nommée «getWidth ()»Et accédez au champ de saisie spécifié. Ce champ de saisie sera calculé pour la taille et la largeur à l'aide du «getBoundingClientRect ()»Méthode et la propriété de largeur respectivement.
Enfin, affichez la largeur calculée:
fonction getWidth ()
var getElement = document.getElementById («champ»);
Position var = GetElement.getBoundingClientRect ();
Var Largeur = position.largeur;
alerte (largeur);
Sortir
Cet article a expliqué les méthodes pour calculer la largeur de l'élément en javascript.
Conclusion
Le "Offsetwidth»Propriété, le«ClientWidth«Propriété ou»getBoundingClientRect ()«La méthode peut être optée pour obtenir la largeur d'un élément en javascript. Le "Offsetwidth«La propriété peut être utilisée pour retourner la largeur extérieure de l'élément, le«ClientWidth«La propriété peut être utilisée pour calculer la largeur intérieure de l'élément spécifié ou le« «getBoundingClientRect ()«Peut être choisi pour calculer la taille de l'élément spécifié et en extraire la largeur. Cet article a démontré les méthodes pour calculer la largeur d'un élément en JavaScript.