Avec le Framework Dojo, vous avez la possibilité de modifier le style CSS d’un élément HTML.
C’est très pratique pour ajouter / supprimer une ou plusieurs classes CSS, en direct, en fonction des actions de l’internaute.
Tout est dans la formation ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
La technique pour modifier le style CSS avec le Framework Dojo
Bonjour à tous et bienvenu sur Développement Facile.
Allez, ensemble on continue les cours dédiés au Framework JavaScript, Dojo Tooltip, un Framework que j’adore, que je trouve génial pour créer des applications Web incroyables, Là vous allez apprendre à modifier le style CSS avec Dojo donc c’est partit pour la pratique.
Connaitre le style d’un élément
Vous l’avez vu dans des exemples précédents parce que je l’ai déjà utilisé. Dojo.style ça va récupérer le nœud, donc avec un identifiant div, p, et vous allez pouvoir récupérer la propriété de style. Ca retourne donc la valeur de la propriété de style.
Vous pouvez modifier le style de cet élément en rajoutant la valeur donc dojo.style, là c’est pour afficher la valeur, il suffit de rajouter juste une variable avec la valeur et donc vous pouvez modifier ou ajouter un style dans une propriété.
Ajouter une classe CSS
Vous pouvez savoir si un élément à une classe CSS avec dojo.addClass donc le noeud et le nom de la classe, vous pouvez ajouter des classes CSS donc soit sous forme de tableaux, soit sous forme de chaîne de caractères, tout simplement, dojo.addClass div texte1 style1, style2, style3, sur votre div texte ou alors en utilisant une notation de tableaux, ça va vous permettre d’ajouter des classes de styles CSS, un élément, un bloc div, un bloc paragraphe, dans votre document HTML.
Vérifier la présence d’une classe CSS
Dojo.hadClass, ça vérifie la présence d’une classe, évidemment, ça retourne la valeur booléenne true lorsque la classe CSS est présente sinon false.
Supprimer une classe CSS
Et ensuite, vous avez la possibilité de supprimer une classe CSS bien évidemment, avec dojo.removeClass, vous pouvez supprimer une classe CSS ou plusieurs classes CSS d’un élément, c’est le même principe de fonctionnement que addClass, soit vous renseignez une chaîne de caractères, soit vous renseignez un tableau avec les différentes classes citées.
Permuter 2 classes CSS
Voilà c’est très simple, vous pouvez permuter deux classes CSS avec la toggleClass, donc dojo.toggleClass, avec le nœud, la div ou le paragraphe, et classe, donc ça ajoute une classe à un élément si elle est absence, ça supprime une classe si elle est présente, ça créé l’effet toggle de permutation, ajout suppression des classes. Cette fonction applique addClass dojo.class est-ce que la classe est présente ? Sinon si elle est présente, on fait dojo.removeClass, si elle est absente dojo.addClass.
En une ligne de code toggleClass ça fait gagner une ligne de code.
Exemple d’application
Un exemple de code source pour agrémenter tout ça, donc même principe de fonctionnement, on a notre texte module1, un autre résultat ici, et on a différents boutons, afficher la largeur du module, modifier le style, ajouter des classes CSS, supprimer la classe de CSS style1, est-ce que la classe style1 est présente et l’effet toggle, on permute la classe CSS, à chaque fois on appelle des fonctions JavaScript, et ici par exemple là on va afficher une boîte d’alerte avec la taille de la div texte, div texte, elle est là, sa taille, la taille de la div ça devrait nous afficher 350, là on va ajouter les classes style 3 classes CSS, style 1, 2, 3 background color, une bordure, un padding, de l’italique, un autre div texte, et on va ajouter un texte, on va le modifier le texte, là on va vérifier est-ce que la classe CSS est présente, dojo.Class style1, là on va la retirer, la supprimer la classe CSS.
Alors, on affiche la largeur 350 comme je vous l’ai dit, on modifie le style, on ajoute des classes CSS, est-ce que la classe CSS est présente, oui, on supprime la classe CSS, est-ce qu’elle est présente ? False, on peut rajouter, elle est présente, on peut la supprimer, elle est absente et on peut permuter les classes CSS.
Votre plan d’actions !
En un rien de temps avec dojo on peut faire des trucs génial avec très peu de lignes de code, comme vous venez de le voir dans cet exemple, donc retrouvez un exemple de code source directement sous ce cours vidéo, mettez en pratique c’est très important de mettre en pratique, les cours dans votre application Web, si vous avez des questions, posez-les sous le cours vidéo et moi je vous dis à très bientôt sur Développement Facile.
[/ppmtoggle][/ppmaccordion]
Téléchargez l’exemple Dojo
Et voici le code JavaScript commenté pour manipuler le CSS d’un élément HTML avec Dojo.
Téléchargement du code source Modifier le style CSS d'un élément HTML
