Il y a quelques vidéos, j'ai introduit ce concept de sélection d'éléments puis de leur manipulation.
Nous sélectionnons donc un H1 ou toutes les balises d'image, puis nous pouvons changer la couleur ou les animer ou les faire faire quelque chose quand vous cliquez sur eux.
Jusqu'à présent, nous avons seulement couvert la moitié de sélection et cette vidéo.
Nous allons présenter quelques-unes des nombreuses façons de manipuler les éléments une fois que nous les avons sélectionnés.
Voici donc les quatre principales choses dont je veux parler.
Le premier est comment changer un style d'élément.
Comment pouvons-nous le rendre bleu ou le faire se cacher.
Modifiez la taille de police.
Ensuite, nous allons parler de l'ajout et la suppression de classes avec javascript et ensuite changer le contenu d'une balise.
Alors, comment puis-je changer le texte à l'intérieur d'une balise H-1 par exemple.
Et puis enfin changer les attributs.
Alors, comment pouvons-nous changer la source sur une étiquette d'image ou la référence sur une étiquette AA.
Nous allons commencer par parler de la propriété de style.
Donc, lorsque le DOM est construit et un nœud individuel est fait ou un objet est fait pour chaque élément unique il ya une propriété appelée style et la propriété de style est un objet énorme des centaines de propriétés pour chaque propriété CSSA unique que nous pourrions définir.
Ainsi, nous pouvons écrire javascript qui va alors aller style et élément différemment.
Donc, ici, je suis en sélectionnant un élément par sa mise en évidence Id afin de le sélectionner pour l'enregistrer à une variable appelée étiquette, puis de la manipuler.
Et ce que je fais, je me couche.
Tag point style point couleur à être bleu tag dot style bordure de point égale à 10 pixels rouge solide.
Il est important de noter que le côté droit doit être une chaîne.
Donc, même si en C Ss nous n'avons pas besoin de mettre des citations autour de bleu ou autour de 70 P x.
Ce n'est pas C Ss.
C'est javascript.
Nous devons donc suivre les règles javascript habituelles.
Donc, j'ai une page web simple mis en place que je vais utiliser pour démontrer certaines de ces propriétés.
Donc, cette page web est super simple, juste un H-1 un paragraphe au lieu de ce paragraphe.
Il ya une étiquette forte et puis deux images de deux mélanges adorables de corgi.
Donc, ce que je vais faire, c'est d'aller chez le Consul et je dois commencer par choisir quelque chose et je vais changer la couleur et la bordure de ce H-1.
J'ai donc besoin de le sélectionner et il ya plusieurs façons de le faire dans un nouveau document qui interroge le sélecteur H-1.
Et puis je vais vous montrer H-1 style qui est un objet géant tonnes et tonnes de propriétés.
Donc, je vais essayer de changer l'un d'eux comme le H-1 de couleur sombre de style et de faire que le jaune.
Et vous pouvez le voir immédiatement changé en jaune.
Même chose avec la bordure H-1 que le style que la frontière égale let's faire cinq pixels rose solide.
Et voilà.
Donc, bien sûr, si nous voulions juste que ce soit jaune avec une bordure rose.
À partir du moment où la page chargée il n'y a aucune raison d'utiliser javascript pour le faire.
Nous venons de le mettre dans notre fichier CSSA, nous utiliserons javascript si nous voulions qu'il devienne jaune et ont une bordure rose lorsque l'utilisateur a été sur la page pendant cinq secondes ou s'il voulait qu'il se produise lorsque l'utilisateur défilé à une partie spécifique de La page ou dans l'utilisateur a cliqué sur quelque chose.
Il s'agit de rendre les choses interactives et nous verrons comment le faire bientôt.
Eh bien, la bonne chose à propos de l'utilisation de la propriété de style est que si vous vous trouvez manipuler un tas de fichiers sur un élément individuel comme je le fais ici et changer cinq propriétés différentes sur ce tag il ya certainement une meilleure façon.
Et il ya quelques raisons qu'il ya une meilleure façon.
Le premier est que ce code n'est pas très sec.
Il ya beaucoup de répétitions taggé style style balisé.
Plus important encore, il ya ce concept appelé la séparation des préoccupations.
Donc la séparation des préoccupations est ce concept que notre H M L R C S s pas javascript.
Sont chacun responsable de leur propre petit domaine et nous ne voulons pas.
Nous ne voulons pas beaucoup de croisement entre eux.
Donc, dans ce diagramme, vous pouvez voir qu'il ya un peu de croisement entre chaque équipe avec laquelle est la structure et javascript qui est ce comportement et puis voir évaluer est la présentation.
Et il ya un peu de chevauchement avec H html javascript, mais n'oubliez pas qu'il était avant C Ss est venu vous avez dû écrire vos styles individuellement dans chaque élément unique où nous utilisons réellement l'attribut de style.
Dans ce cas notre présentation le style a été réellement tissé dans la structure et avec C Ss nous les avons maintenant séparés dehors.
Donc, notre HMO est pure structure et notre succès est pure style.
Donc, ce javascript s'inscrit dans le fait qu'il devrait contrôler le comportement d'une page et parfois cela signifie changer la façon dont les choses regardent, mais plutôt que de simplement changer les propriétés à l'intérieur du javascript en fait faire le style dans le javascript.
Ce que nous pouvons faire, c'est de les activer et de les désactiver dans le fichier CSSA.
Donc l'un des modèles qui est vraiment commun, c'est que nous définissons une classe CSSA comme highlight et que la classe highlight aura cinq ou six ou plusieurs propriétés différentes que nous changeons.
Et puis nous pouvons alors sélectionner un élément avec javascript et lui donner cette classe en surbrillance.
Ainsi en Javascript avec une ligne nous pouvons ajouter une classe qui changera alors cinq propriétés différentes.
Jetons un oeil à la façon dont cela serait mis en œuvre en Javascript.
Donc, plutôt que de sélectionner une étiquette, puis de changer de style, mais la couleur pour être bleu et ensuite style de bordure d'être 10 pixels rouges solides ce que nous pourrions faire à la place est de trouver une classe dans cette classe pourrait être appelé quelque chose.
Habituellement, vous voulez qu'il soit un peu significatif afin de refléter ce que la classe est censée faire.
Est-ce quelque chose qui est mis en évidence ou est-ce une réponse correcte.
Un score élevé pour une raison quelconque que vous appliquez la classe en essayant de trouver un bon nom.
Donc, ce n'est pas un bon nom, mais une certaine classe une certaine classe est de changer la couleur pour être bleu et la bordure 10 pixels rouges solides.
Ensuite, tout ce que je dois faire est de sélectionner ma balise et puis tag point liste de la classe dot ajouter une classe et qui donnera ma balise avec l'idée de mettre en évidence une nouvelle classe appelée une classe dans tous ces styles seront appliqués.
Il ya quelques autres choses que nous pouvons faire avec la liste de classe.
Donc, dans cet exemple, je montre trois méthodes d'ajouter que nous avons déjà vu qui est la façon dont nous pouvons ajouter une classe de supprimer qui prend un nom de classe et il supprime ce nom de classe de la liste de classe et la liste de classe toggle qui est extrêmement utile.
Il faut un nom de classe.
Et si l'élément donné a déjà cette classe, il le supprimera si l'élément n'a pas cette classe puis je l'activerai.
Très très utile.
Nous allons l'utiliser tout le temps plus tard.
Permettez-moi donc de vous le démontrer avant de revenir à mon exemple ici.
Je vais vraiment définir une nouvelle classe.
Donc, plutôt que de faire une nouvelle feuille de style et en utilisant un lien, je vais juste utiliser une balise de style juste pour le bien du temps.
Donc je vais définir une classe que vous allez juste appeler grand.
Et ce que je vais faire est de changer la taille de la police à 100 pixels et de changer la couleur pour être orange.
Et enfin, laissez-nous lui donner une bordure de cinq pixels rouges solides.
Je vais donc en rester là.
Si je rafraîchir ma page rien ne change bien sûr, mais quand je veux faire est d'appliquer cette classe à quelque chose.
Donc, je vais faire ce paragraphe ont la grande classe à faire que j'ai besoin de le sélectionner jusqu'à présent.
Paragraphe est égal au document que le paragraphe sélecteur de requête.
D'ACCORD.
Et commençons juste par regarder la liste de classe et vous pouvez voir que c'est vide.
Il n'y a pas encore de classes affectées à ce paragraphe.
Donc, si je veux assigner un tout ce que j'ai besoin de faire est de dire P-Dub liste de la liste dot ajouter et je veux ajouter la classe big.
Et voilà.
Il reflète donc automatiquement les nouvelles modifications de ma feuille de style.
Tout ce que je devais faire, c'est ajouter la grande classe.
J'espère que vous verrez que c'est beaucoup plus facile et que nous séparons les responsabilités.
Donc, tout ce qui est javascript fait est il se met en ou hors une partie spécifique de la SS plutôt que manuellement manuellement manipuler des propriétés individuelles.
Nous changeons maintenant les choses le moins possible au lieu de notre Javascript.
Donc, si je veux supprimer tout ce que j'ai besoin de faire est de classe classless pas enlever grand et mon préféré dont j'ai mentionné est super utile est basculer.
Donc, si je touche toggle en ce moment et appuyez sur Entrée il n'ya pas de classe attribuée, donc il va lui attribuer la classe grande.
Maintenant big est déjà affecté, donc il va l'enlever.
Donc, ce n'est utile évidemment pas dans ce cas de rendre cette orange fou dans la classe de police énorme, mais ce que nous pourrions faire est sur quelque chose comme une liste à faire si nous voulons que l'utilisateur soit en mesure de cliquer dessus pour faire.
Et cela va le briser.
Mais ils peuvent cliquer à nouveau et puis il va décrocher ou simplement revenir à la normale.
Cela serait fait.
Ou nous pourrions le faire en basculant une classe afin que nous puissions avoir une classe appelée fait et je clique appliqué cliquez de nouveau.
Il est supprimé.
C'est juste un exemple de lorsque vous pouvez utiliser la bascule.
Mais c'est vraiment très utile.
Le dernier point que j'apporterai sur la liste de classe est que ce n'est techniquement pas un tableau.
Cela signifie que nous devons utiliser une annonce pour ajouter une classe.
Nous ne pouvons pas faire quelque chose comme pousser.
Donc, juste une note mineure, mais il est important de savoir que ce n'est pas techniquement un tableau.
Nous avons donc abordé deux manières différentes de manipuler le style via notre javascript.
La première est de le faire manuellement une propriété à la fois, ce qui est honnêtement fine si vous faites juste une ou deux choses.