Javascript Obtient La Hauteur De L’Élément

| | | | | | | | | | | | | | | | | | | |

Lors de la conception d`une page Web, vous souhaiterez probablement spécifier des dimensions spécifiques pour les éléments qui apparaissent sur la page Web. Par exemple, vous voudrez peut-être qu`une boîte ait une certaine hauteur ou qu`une ligne de texte s`étende sur une certaine largeur.

C`est là que les propriétés CSS de hauteur et de largeur entrent en jeu. Les propriétés de hauteur et de largeur sont utilisées pour définir la hauteur et la largeur d`un élément en CSS.

Ce tutoriel abordera, avec des exemples, les bases des propriétés de hauteur et de largeur CSS et comment utiliser la hauteur minimale et maximale et les propriétés de largeur pour concevoir des éléments réactifs. À la fin de ce didacticiel, vous serez familiarisé avec l`utilisation des propriétés de hauteur et de largeur CSS pour définir la taille d`un élément sur une page Web.

Hauteur et largeur CSS

Ajustement la hauteur et la largeur d`un élément sur une page web permettent de définir l`espace qu`occupera l`élément sur la page web. Cela peut vous aider à développer une structure pour les éléments de votre page Web afin que chaque élément s`affiche correctement en fonction de vos besoins.

Pour définir jusqu`où un élément peut s`étendre horizontalement et verticalement, vous pouvez utiliser la largeur et propriétés de hauteur, respectivement.

Les propriétés de largeur et de hauteur vous permettent de définir une largeur et une hauteur spécifiques pour la zone de contenu d`une boîte. Cela signifie que les propriétés width et height contrôlent la quantité d`espace contenue dans une boîte et n`affectent pas une marge ou un jeu de remplissage pour une boîte

Les propriétés height et width utilisent la syntaxe suivante :.

HeightValue et widthValue peuvent accepter l`une des valeurs suivantes :

  • auto : le navigateur calcule automatiquement la hauteur et la largeur
  • longueur:. la largeur ou la hauteur d`un cadre en px, em, rem, etc.
  • pourcentage : la largeur ou la hauteur d`une boîte en pourcentage de la taille des blocs dans lesquels une initiale
  • élément apparaît :. la valeur par défaut spécifiée pour la case
  • hériter :. la même valeur que la largeur ou la hauteur de la boîte dans laquelle un élément apparaît

Maintenant que nous connaissons les bases des propriétés de hauteur et de largeur, nous pouvons explorer un exemple de chacune d`entre elles propriétés en action.

Hauteur et largeur CSS

Supposons que nous concevons un site Web pour un café local appelé The Pickled Apple. Ce café nous a demandé de créer une boîte sur leur "À propos" site Web, qui doit contenir une brève description du café.

Cette zone doit être de 200px de large et 200px de haut et avoir un fond gris clair. Ces dimensions ont été choisies pour s`assurer que les autres éléments que nous voulons ajouter à la forme de la page Web lorsque nous les implémentons.

Nous pourrions utiliser le code suivant pour créer la boîte :.

Cliquez Image du bouton

Analysons notre code.. Dans notre fichier HTML, nous avons créé un paragraphe de texte à l`aide d`un < balise p>. Cette balise

a le nom de classe AboutBox, que nous utilisons dans notre fichier CSS pour styliser le paragraphe de texte.

Dans notre fichier CSS, nous avons défini une règle de style qui s`applique à tout élément avec le nom de classe AboutBox. Cette règle de style définit la hauteur d`un élément sur 200px, la largeur d`un élément sur 200px et définit la couleur d`arrière-plan d`un élément sur gris clair.

Si nous voulons que notre élément ait une largeur de 100px. Nous avons besoin de changer la propriété width égale à 100px. Ou, si nous voulions que notre élément mesure 300px de haut, nous pourrions changer la propriété Height pour qu`elle soit égale à 300px

propriétés de CSS longueur minimale et maximale

largeur et hauteur sont des valeurs fixes. cela signifie que la largeur et la hauteur spécifiées restent les mêmes et ne changeront pas si vous redimensionnez la fenêtre ou affichez la page Web sur un autre appareil (sauf si vous utilisez une valeur relative de hauteur, par exemple un pourcentage de la taille de l`élément parent).

Il est important de comprendre cela car si vous souhaitez concevoir une expérience accessible, il peut ne pas être pratique de définir des hauteurs et des largeurs spécifiques pour les éléments. Par exemple, si vous spécifiez la largeur de l`image à 500px, l`image peut ne pas s`afficher correctement si un utilisateur consulte le site sur un appareil mobile, la taille de l`écran peut être plus petite.

est où le minimum et valeurs de longueur maximale .

Pour adapter un élément aux dimensions des écrans et des fenêtres, vous pouvez utiliser les propriétés minimum width, m ax width, min-height et max-height. Lorsque vous spécifiez ces propriétés, les valeurs "spécifiées pour la largeur et la hauteur sont prioritaires.

La propriété min-height définit la hauteur minimale d`une propriété. Si la hauteur minimale est spécifiée, la hauteur d`un élément ne peut jamais être inférieure à la valeur de hauteur minimale. La propriété min-width définit la largeur minimale d`une propriété et fonctionne de la même manière.

De même, si vous souhaitez définir la hauteur ou la largeur maximale d`une propriété, vous pouvez utiliser la hauteur maximale et la largeur maximale, respectivement.

Revenons à notre exemple de café de tout à l`heure. Supposons que nous voulions modifier la largeur de notre boîte en fonction de la taille de l`écran de l`utilisateur . La largeur maximale de la boîte doit être de 500 pixels et notre boîte ne doit jamais être inférieure à 100 pixels. Nous pourrions le faire en utilisant le code suivant :

Cliquez Image du bouton

Analysons notre code et discutons. Comment ça fonctionne. Dans notre fichier HTML, nous avons spécifié un paragraphe de texte entre des balises

contenant le même texte que notre premier exemple. Le nom de la classe associée à ce paragraphe de texte est AboutBox.

Dans notre fichier CSS, nous avons spécifié trois propriétés associées à la classe AboutBox

La largeur de la propriété max- est défini sur 500px, ce qui signifie que la largeur maximale de la boîte est de 500px. La propriété min width est définie sur 100px, ce qui signifie que la boîte n`apparaîtra jamais plus étroite que 100px, quel que soit l`appareil sur lequel un utilisateur consulte le site. La propriété background-color est définie sur LightGray, ce qui définit la couleur d`arrière-plan de notre boîte sur gris clair.

La taille de cette zone change en fonction de la taille du navigateur. Donc, si vous réduisez la fenêtre de votre navigateur , la taille de la boîte changera en conséquence. Cependant, quelle que soit la taille de la fenêtre de votre navigateur, la largeur de la balise

ne dépassera jamais 500 px.

Conclusion

La Propriété CSS hauteur et largeur Ces propriétés vous permettent de définir la hauteur et la largeur d`un élément sur une page Web.

Cependant, ces propriétés définissent une valeur fixe pour la hauteur et la largeur d`un élément. Si vous souhaitez que la taille d`une boîte change en fonction de la taille de la fenêtre du navigateur, vous pouvez utiliser les propriétés min height, min-width, max-height et max-width.

Ce didacticiel a abordé , se référant à des exemples, les bases de la hauteur et de la largeur en CSS, comment utiliser les propriétés de hauteur et de largeur, et comment utiliser les propriétés de hauteur et de largeur maximales et de correspondance minimale pour définir la taille d`un élément d`une page Web.Vous êtes maintenant prêt pour commencer à utiliser les propriétés de hauteur et de largeur comme un expert !