Apprenez comment ajouter / modifier et supprimer des classes CSS, à la volée, avec jQuery.
Très pratique pour modifier les propriétés de style de n’importe quel élément de la page web.
Tout est dans le cours vidéos ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Comment modifier le style CSS avec le Framework jQuery
Bonjour à tous et bienvenu sur Développement Facile.
Dans ce nouveau cours consacré à jQuery, vous allez apprendre à manipuler le style CSS, si vous avez fait attention dans les cours précédents, il y a des exemples de code source, qui justement modifie le style CSS qui ajoute ou supprime certaines classes CSS.
Là ensemble on va rentrer dans le détail, pour que vous puissiez les utiliser à votre tour, ces options-là de jQuery.
Connaitre la valeur d’un attribut
Pour connaître la valeur d’un attribut CSS vous faites $ p.CSS ça va récupérer la couleur du paragraphe, ça vous permet CSS, d’accéder à une propriété de style du premier élément trouvé, cette méthode va vous renvoyer une chaîne de caractères string.
Ensuite vous pouvez modifier les propriétés CSS, toujours $ p.CSS, vous mettez la propriété CSS, sa valeurs séparée par une virgule, si vous voulez modifier plusieurs propriétés CSS, donc color rouge, background bleu, la notation propriété valeur, donc les valeurs suivant le vocabulaire que vous utilisez, séparés par une virgule pour modifier les propriétés de styles.
Attention si la propriété CSS contient un tiret comme par exemple background-color, celle-ci est placée entre guillemet « background-color », sinon vous pouvez tout attacher, jQuery comprend backgroundcolor tout attaché, en principe dans le code source que je vous fournis, j’enlève le tiret et je mets tout attaché backgroundcolor c’est beaucoup plus rapide à écrire. Cette méthode renvoie également un objet jQuery.
Attribuer des propriétés de style
Ensuite vous pouvez attribuer des propriétés de style CSS clé valeurs, ça modifie le style d’un élément donné comme je vous l’ai dit, $ p.css color red, ça va affecter la couleur rouge à la balise p, donc c’est la même chose que ce que je vous ai montré comme exemple tout à l’heure.
Modifier la taille d’un élément
Vous pouvez avec ces techniques-là, modifier la taille d’un élément ou récupérer la taille d’un élément, $ p.height, ça va vous retourner la hauteur d’un élément, par contre si vous mettez $ p.height avec une valeur en pixels, en pourcentage, ça va modifier la hauteur de l’élément, pareil avec .width, tout seul, ça vous retourne la largeur exprimée en pixels, si vous mettez .width avec une valeur, ça modifie la largeur en pixels d’un paragraphe pour l’exemple que vous avez sur cette vidéo.
Vous pouvez accéder à tous types d’éléments, et bien évidemment, les modifier en renseignant la valeur, innerHeight ça retourne la hauteur inférieure du premier élément trouvé, innerWidth la largeur intérieure, outerHeigh la hauteur extérieure, outerWidth la largeur extérieure.
Modifier le positionnement d’un élément
Vous avez également la position pour récupérer la position d’un élément, offset pour récupérer la valeur top et left, dans la position d’un élément relatif au document, ces deux méthodes renvoient un objet de type jQuery avec top et left, pour en déduire la position.
Les méthodes scrollTop(valeur) et scrollLeft(valeur) ça permet quand vous avez un contenu défilant, d’accéder directement, de faire un décalage de votre contenu, d’accéder, si vous faites défiler du texte, d’accéder directement au texte que vous souhaitez, si vous avez des images les unes à côté des autres, avec scrollLeft, d’accéder directement à l’image que vous désirez, très pratique ces méthodes de jQuery.
ScrollTop ça modifie le décalage en pixels entre le bord supérieur du document et l’élément sélectionné, scrollLeft c’est au niveau horizontal que ça va modifier le décalage alors que scrollTop c’est au niveau vertical.
Dans l’exemple qui s’affiche à l’écran $ div.scrollLeft c’est pour modifier le décalage horizontal, tout simplement, ces deux méthodes renvoies un objet jQuery.
Je vous montre un exemple de code source, alors ici, tout est commenté, comme d’habitude, comme ça vous pouvez faire un copier-coller du code jQuery, donc là, div 1 identifiée par div1, hop, on récupère la propriété CSS, on récupère la propriété CSS, et on récupère la propriété CSS.
Si vous regardez dans le code source, des div, menus, hauteur, largeur, 3 pixels solides, visibilité, la hauteur du div, là on récupère la visibilité et la couleur du div, parce que ce que c’est ce qu’on a écrit ici, ici on veut récupérer background-color, la hauteur et la visibilité, tout simplement.
Ensuite over, on survole le texte, qu’est-ce qu’on survol ?
.div_over elle est ici, c’est le texte, et au moment où on survole le over, mouseover, on rajoute une couleur de background, on la passe en italique, par contre quand la souris s’en vas, on change le bakcground-color et le font size on les supprime, comme ça, ça revient à la valeur précédente, tout simplement.
Qu’est-ce qu’il y a d’autre ?
Ça c’est pour changer la position, il passe au-dessus, il passe en dessous, les divs, il y a un système de profondeur, si vous avez fait du développement flash avec ActionScript …hop …des profondeurs des éléments, donc les uns sur les autres, avec le div, les CSS c’est exactement la même chose et JavaScript, jQuery vous permet de gérer ça très facilement.
En mouseover, on agrandit directement la div dès qu’on passe au-dessus, aller au paragraphe scrollTo, on va directement au paragraphe, reset, on revient tout en haut, là je vous ai montré dans cet exemple, vous avez beaucoup de choses pour manipuler encore plus les éléments du document HTML, les balises CSS, modifier le style CSS en direct, téléchargez le code source sous cette vidéo, mettez-le en pratique dans votre site HTML 5, si vous avez des questions posez-les sous ce cours vidéo et moi je vous dis à très bientôt sur Développement Facile.
[/ppmtoggle][/ppmaccordion]
Téléchargez l’exemple jQuery
Retrouvez le code source commenté pour modifier les propriétés de style d’un élément HTML.
Téléchargement du code source Modifier le style CSS d'un élément HTML avec jQuery
