CATALOGUE Code & Data Formation Ajax/jQuery Apprendre Ajax / JQuery

Manipulation des Dimensions CSS avec JQuery

Retour à la formation
Chapitre 8 Leçon 1
Précédent
Suivant

Découvrez comment utiliser des fonctions JQuery pour lire et modifier les dimensions CSS d'éléments HTML.

Détails de la leçon

Description de la leçon

JQuery offre une variété de fonctions pour la manipulation des propriétés CSS, particulièrement pour les tailles d'éléments.
Les fonctions Height et Width permettent de lire et modifier les dimensions d'un élément en spécifiant des unités CSS reconnues.
Les dimensions internes d'un bloc, avec le padding inclus, peuvent être obtenues via InnerHeight et InnerWidth.
Quant aux dimensions externes, incluant padding et border, elles sont récupérables via OuterHeight et OuterWidth.
À travers divers exemples tels que la lecture et la modification de la hauteur d'un titre h1 et la manipulation des dimensions d'une image, cette leçon vous donnera les outils nécessaires pour maîtriser ces aspects de JQuery.

Objectifs de cette leçon

Les objectifs de cette vidéo sont :
- Comprendre les fonctions JQuery pour modifier les dimensions CSS.
- Apprendre à lire et modifier les dimensions internes et externes d'éléments HTML.
- Appliquer les notions apprises sur différents éléments comme des titres et des images.

Prérequis pour cette leçon

Avant de suivre cette vidéo, il est recommandé d'avoir :
- Des connaissances de base en HTML et CSS.
- Une compréhensions des fondamentaux de JQuery et de JavaScript.

Métiers concernés

Les compétences acquises dans cette vidéo peuvent être utilisées par :
- Les développeurs front-end pour des projets web.
- Les intégrateurs web cherchant à affiner le contrôle sur le rendu visuel des pages.
- Les designers web souhaitant créer des interfaces dynamiques et responsives.

Alternatives et ressources

En alternative à JQuery, d'autres bibliothèques JAVA de manipulation DOM/CSS incluent React.js et Angular.

Questions & Réponses

InnerHeight inclut la hauteur avec le padding, tandis qu'OuterHeight inclut à la fois le padding et la border.
En utilisant la méthode .width() de JQuery avec un argument de valeur de largeur en unités CSS, par exemple .width('50%').
La fonction Height retourne la hauteur de l'élément en pixels si aucun argument n'est fourni.