Comment définir les dimensions des éléments HTML à l'aide de jQuery

La définition correctement des dimensions des éléments HTML est très significative lors de la structuration de la disposition d'une page Web, car les bonnes dimensions améliorent l'apparence globale de votre site Web qui, en retour, stimule l'expérience utilisateur. JQuery fournit de nombreuses méthodes qui vous aident à effectuer cette tâche avec une grande facilité.

Les dimensions des éléments HTML peuvent être définies en utilisant les méthodes JQuery mentionnées ci-dessous.

1. Width () Méthode
2. Méthode de hauteur ()
3. méthode innnerwidth ()
4. Méthode innnerheight ()
5. Méthode OUTERWIDTH ()
6. Méthode OUTERHEIGHT ()

Explorons-les en détail.

Width () Méthode

Aux fins de la définition ou de la récupération de la largeur des éléments HTML, la méthode Largeur () est utilisée.

Cette méthode fonctionne d'une manière que lorsqu'elle n'est utilisée que pour récupérer la largeur d'un élément, il renvoie la largeur du premier élément correspondant, cependant, lorsqu'il est utilisé pour régler la largeur, il définit la largeur de tous les éléments correspondants.

Syntaxe

Pour récupérer la largeur d'un élément.

$ (sélecteur).largeur()

Pour régler la largeur d'un élément.

$ (sélecteur).largeur (valeur)

Exemple

Supposons que vous souhaitiez modifier la largeur d'un élément en utilisant la méthode jQuery Width (). Utilisez le code ci-dessous.

Html

Se régler la largeur

Dans le code HTML ci-dessus, nous avons créé un et un élément. De plus, nous avons donné un certain style à l'élément en utilisant CSS en ligne.

jquery

$ (document).ready (function ()
$ ("# bouton").cliquez sur (fonction ()
$ ("div").largeur (500);
);
);

Dans ce code jQuery, la méthode Width () est utilisée pour définir une nouvelle largeur de l'élément à 500px.

Sortir

Avant de cliquer sur le bouton.

Après avoir cliqué sur le bouton.

La largeur de l'élément a été modifiée.

Méthode heigth ()

Cette méthode fonctionne de manière similaire à la méthode Largeur (), avec la différence évidente qu'il est utilisé pour donner ou récupérer la hauteur des éléments HTML.

Cette méthode fonctionne également d'une manière que lorsqu'elle est utilisée uniquement pour récupérer la hauteur d'un élément, il extrait la hauteur du premier élément qui correspond à l'élément spécifié, cependant, lorsqu'il est utilisé pour régler la hauteur, il définit la hauteur de toutes éléments.

Syntaxe

Pour récupérer la hauteur d'un élément.

$ (sélecteur).hauteur()

Pour régler la hauteur d'un élément

$ (sélecteur).hauteur (valeur)

Exemple

Supposons que vous souhaitiez définir une certaine hauteur d'un élément en utilisant la méthode jQuery Height (). Suivez le code ci-dessous.

Html

Entrez votre nom:


Afficher la hauteur du champ de saisie

Ici, nous avons créé, un champ de saisie et réglé une hauteur de 10px, une largeur de 200px et une couleur de fond en rose.

De plus, nous avons Aslo créé un bouton.

jquery

$ (document).ready (function ()
$ ("bouton").cliquez sur (fonction ()
$ ("entrée").hauteur (20);
);
);

Nous avons utilisé la méthode jQuery Height () ici pour modifier la hauteur du champ de saisie. La hauteur changera lorsque vous cliquez sur le bouton.

Sortir

Avant de cliquer sur le bouton.

Une fois le bouton cliqué.

La méthode Height () fonctionne correctement.

méthode innerwidth ()

Dans le but de récupérer la largeur intérieure du premier élément qui correspond à l'élément spécifié, la méthode innerwidth () est utilisée.

Syntaxe

$ (sélecteur).innerwidth ()

Exemple

Supposons que vous souhaitiez afficher l'interwidth d'une image. Utilisez le code suivant.

Html

Afficher la largeur intérieure de l'image

Ici, nous avons affiché une image en utilisant la balise, en outre, nous avons réglé sa hauteur, sa largeur, son rembourrage et sa bordure. Avec l'image, nous avons également créé un bouton qui sera utilisé pour afficher la largeur intérieure de l'image.

jquery

$ (document).ready (function ()
$ ("bouton").cliquez sur (fonction ()
alerte ("largeur intérieure de l'image:" + $ ("img").innerwidth ());
);
);

Dans le code ci-dessus, nous utilisons la méthode innerwidth () pour afficher la largeur intérieure de l'image.

Sortir

Avant que le bouton ne soit cliqué.

Une fois le bouton cliqué.

La largeur intérieure de l'image a été affichée.

Note: La méthode innerwidth () comprend également un rembourrage tout en affichant la largeur intérieure d'un élément.

Méthode innerheight ()

La méthode innerHeight () est utilisée pour récupérer la hauteur intérieure du premier élément qui correspond à l'élément spécifié.

Syntaxe

$ (sélecteur).innerheight ()

Exemple

Nous allons utiliser l'exemple utilisé dans la section ci-dessus pour comprendre le fonctionnement de la méthode jQuery InnerHeight ().

jquery

$ (document).ready (function ()
$ ("bouton").cliquez sur (fonction ()
alerte ("hauteur intérieure de l'image:" + $ ("img").innerheight ());
);
);

Nous avons utilisé la méthode innerheight () pour extraire la hauteur intérieure de l'image du chien.

Sortir

Avant de cliquer sur le bouton.

Après avoir cliqué sur le bouton.

La méthode innerheight () fonctionne correctement.

Note: La méthode innerheight () comprend également un rembourrage tout en affichant la hauteur intérieure d'un élément.

Méthode OUTERWIDTH ()

Dans le but de récupérer la largeur extérieure du premier élément qui correspond à l'élément spécifié, la méthode OUTERWIDTH () est utilisée.

Syntaxe

$ (sélecteur).OUTERWIDTH ()

Exemple

Supposons que vous souhaitiez extraire la largeur extérieure d'un élément div. Voici comment tu fais.

Html

Largeur extérieure de div

Nous avons créé une div et lui avons donné une certaine couleur d'arrière-plan, hauteur, largeur, rembourrage et bordure. De plus, nous avons également créé un bouton.

jquery

$ (document).ready (function ()
$ ("bouton").cliquez sur (fonction ()
alerte ("Largeur extérieure de div:" + $ ("div").OUTERWIDTH ());
);
);

Ici, nous avons utilisé la méthode jQuery OuterWidth () pour afficher la largeur externe de l'élément div.

Sortir

Avant que le bouton ne soit cliqué.

Lorsque le bouton est cliqué.

La méthode OUTERWIDTH () fonctionne correctement.

Note: La méthode OUTERWIDTH () calcule le rembourrage ainsi que la bordure tout en affichant la largeur extérieure d'un élément.

Méthode OUTERHEIGHT ()

La méthode OUTERHEight () est utilisée pour récupérer la hauteur externe du premier élément qui correspond à l'élément spécifié.

Syntaxe

$ (sélecteur).OUTERHEIGHT ()

Exemple

Nous allons utiliser l'exemple utilisé dans la section ci-dessus pour comprendre le fonctionnement de la méthode jQuery OuterHeight ().

jquery

$ (document).ready (function ()
$ ("bouton").cliquez sur (fonction ()
alerte ("hauteur extérieure de div:" + $ ("div").OUTERHEight ());
);
);

Nous avons utilisé la méthode OUTERHEIGHT () pour extraire la hauteur externe de l'élément div.

Sortir

Avant de cliquer sur le bouton.

Après avoir cliqué sur le bouton.

La méthode extérieure () fonctionne correctement.

Note: La méthode extérieure () comprend également le rembourrage ainsi que la bordure tout en affichant la hauteur extérieure d'un élément.

Conclusion

Les dimensions d'un élément HTML peuvent être définies en utilisant les différentes méthodes jQuery qui sont; width (), height (), innerwidth (), innerheight (), outerwidth () et exterheight (). Les méthodes Largeth () et Height () définissent ou récupèrent respectivement la largeur et la hauteur des éléments. Tandis que la méthode Innerwidth (), InnerHeight (), OUTERWIDTH () et OUTERHEIGH. Toutes ces méthodes sont expliquées en détail avec les exemples pertinents.