Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

L'essentiel de JavaScript

Appliquer des classes CSS

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Vous allez apprendre à appliquer et à supprimer des classes CSS de manière programmatique, en réponse à un évènement.

Transcription

Si dans votre feuille de style CSS, vous avez des classes, eh bien, vous pouvez appliquer ces classes CSS à vos éléments, grâce au JavaScript. Prenons, par exemple, cette classe « .example » , vous voyez qu'elle applique une couleur au texte, le blanc, une taille aux caractères, « 1en » et un alignement du texte à droite. Eh bien, si vous voulez appliquer cette classe à vos éléments en JavaScript, vous avez, en réalité, une seule chose à faire, c'est ceci, c'est-à-dire la seule ligne de ce code qui est véritablement intéressante. Cette ligne de code, que fait-elle ? Elle va rechercher dans le DOM un élément qui s'appelle « mainContent », grâce, bien évidemment, à « getElementById », et puis, nous changeons la propriété « className » de cet élément et on la rend égale au nom de la classe CSS que l'on désire appliquer, ici « .example ». Il y a une chose à remarquer, c'est le nom de cette propriété, qui s'appelle « className », et non « class » tout court, en effet, dans les langages de programmation, le mot « class », tout court, est un mot clé réservé. Une classe, c'est quelque chose qu'on utilise en programmation orientée objet. Et, bien que le JavaScript ne soit pas, à proprement parler, un langage orienté objet, en tout cas pas encore, ça vient dans l'ECMAScript 6, eh bien, le mot « class » est, quand même, un mot clé réservé. Donc, le DOM ne pouvait pas se servir de ce mot-là pour exprimer la propriété qui permet d'appliquer des classes CSS, et c'est pour cela que l'on a choisi, à la place « className ». Mais, c'est véritablement, ici, la seule chose à retenir, le reste de ce code est simplement là pour ajouter un petit peu d'interactivité autour de cette classe CSS, donc j’attends, ici, avec « onload » que la page soit complètement chargée, une fois qu'elle est prête, j'exécute la fonction « preparePage » qui est définie plus haut, et cette fonction va rechercher dans le DOM l'élément qui s'appelle « mainContent » et associe, à l'évènement « onclick » de cet élément, une fonction anonyme, une fonction qui vérifie d'abord, si cet élément est déjà équipé de la classe « .example » ou pas. Si la classe « .example » est déjà appliquée à cet élément, eh bien, on va tout simplement la retirer, vous voyez ici la chaîne de caractères vide, et dans le cas inverse, on applique cette classe CSS à l'élément. Donc, j'ai de nouveau, ici, une espèce de « toggle button », un « switch », un on/off, qui me permet d'appliquer ou de retirer cette classe de l'élément. Alors, dans l'HTML, qu'est-ce que c'est que ce « mainContent » ? Eh bien, c'est un « div » qui est, ici, en tête de code, qui contient un titre, un paragraphe, et plein d'autres éléments. Allons voir, dans le navigateur comment tout cela fonctionne, le « div mainContent », c'est le grand « div » qui est ici, au milieu de la page et quand je clique dans ce « div », j'applique ma classe ou je la retire. Vous voyez donc que la mise en forme de ces éléments change en fonction de mes clics. Alors, remarquez, aussi, que, quand la classe est appliquée, eh bien le titre est bien en blanc, tout est bien à droite, ça va aussi, mais vous voyez que le paragraphe, lui, est resté en noir. Eh bien, ce n'est pas parce que vous appliquez des classes CSS avec du JavaScript que les règles de cascades ne s'appliquent pas. En fait, ici, le paragraphe reste en noir, parce que plus tard, dans le CSS, il y a une instruction qui lui demande de rester en noir, et qui, au vu des règles de cascades, est plus puissante, plus importante que l'instruction de la classe qui demande à ce texte d'être en blanc. Donc, les règles du CSS restent, bien évidemment, en application, que vous appliquiez vos classes naturellement dans l'HTML avec l'attribut classe, ou ici, avec le JavaScript.

L'essentiel de JavaScript

​Ajoutez des fonctionnalités interactives à vos pages web avec JavaScript. Découvrez la syntaxe, le DOM, l'utilisation des bibliothèques JavaScript populaires, etc.

Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :26 avr. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !