Je construis un simple chatbot. Sur chaque nouveau message reçu du serveur, un nouvel élément HTML est créé et poussé sur le navigateur.
Donc, par exemple, le message 1 sera le suivant: p>
<div class="message-computer" style="color: black; background-color: yellow;"><p>Hi, how are you?</p></div>
3 Réponses :
Vous pouvez essayer ce code.
Description strong>: Au début, nous appelons la fonction de charge de script, charge de fenêtre ou charge de document pour le style de l'élément déjà généré. Après cela, je suis un bouton Créer un bouton avec cliquez sur Action. Le bouton Cliquez sur Ajouter un élément dynamique et un organisme de l'append à nouveau appelez la fonction Un autre moyen est d'écrire un CSS pour == merci == stry> p> p> ChangeClass () code>. c'est beau. p> .Message-ordinateur {Fond: Jaune; la couleur noire; } code> C'est aussi bien pour les solutions précédentes. p>
<button type="button" onClick="addMsg()">addMessage</button>
<div class="message-computer"><p>Hi, how are you?</p></div>
<div class="message-user"><p>I am good, thanks!</p></div>
Vous pouvez créer de manière dynamique une feuille de style et l'ajouter au document, cela agira sous forme de feuille de style normale complète avec des règles de priorité et déclenchera toute modification que toutes les règles que vous avez définies:
P>
<button id="add-message">Add message</button>
<button id="change-style">Change style</button>
<div id="chat">
<div class="message-computer">
<p>Hi, how are you?</p>
</div>
<div class="message-user">
<p>I am good, thanks!</p>
</div>
</div>Au lieu d'ajouter de nouveaux styles pour chaque élément, vous devez définir vos différents styles et simplement basculer entre les états.
p>
<div class="chatLog">
<p class="user">Hi, I'm a user</p>
<p class="computer">Nice, I'm a computer</p>
</div>
<input type="text" placeholder="Type some text...">
<hr>
<label id="darkMode">
Dark mode
<input type="checkbox">
</label>
Pouvez-vous confirmer quand appelez-vous
ChangeClass () ?Vous allez toujours dans ce mauvais sens, alors que j'ai essayé de vous indiquer dans un commentaire de votre question précédente qui était à peu près sur le même sujet / problème déjà. Ne pas boucler à travers tous les éléments et modifier quelque chose à ce sujet directement - mais Soit CSS faire son travail! Définir ou modifier la classe de un élément d'ancêtre commun l'élément d'ancêtre commun, puis utilisez le < I> Combinateur descendant dans votre feuille de style pour formater tous ces éléments différemment en fonction de cela.