J'espère que vous allez bien dans ces circonstances. Je crée une page Web où il y a un bouton qui, lorsque vous avez cliqué sur Inverse la couleur de la page Web. J'ai très nouveau à la programmation pour que je puisse toujours essayer de tout comprendre. J'ai le code CSS suivant qui invertit les couleurs - Cependant, je souhaite ajouter un bouton qui, lorsque vous avez cliqué sur Invertit les couleurs et, lorsque vous avez cliqué, les ramène à la normale (c'est-à-dire les inverties de nouveau). Toute aide serait appréciée.
3 Réponses :
Vous pouvez ajouter une classe dans le corps pour basculer le mode sombre
p>
<body>
<div class="wrapper">
<input type="checkbox" class="toggleDarkmode">Dark MODE!
</div>
</body>Merci pour votre participation! J'étais curieux, y a-t-il un moyen de l'avoir pour une case à cocher? J'ai effectivement créé un bouton coulissant qui n'est qu'une case à cocher à l'intérieur. Comment puis-je utiliser l'utilisation qu'au lieu d'un bouton HTML hardcore, si vous savez ce que je veux dire? Merci pour l'aide Tho!
@Noor j'ai changé l'extrait, espérons que cela aide! ;)
Pour mettre en œuvre ce comportement, vous aurez besoin d'un peu de JavaScript.
Tout d'abord, donnons à une classe CSS au code qui inverse les couleurs: p>
<h1>Welcome to my website!</h1> <button id='invert-colors-button'>Invert colors</button> <input type='checkbox' id='invert-colors-checkbox'/> <label for='invert-colors-checkbox'>Invert colors</label>
Merci pour votre participation! J'étais curieux, y a-t-il un moyen de l'avoir pour une case à cocher? J'ai effectivement créé un bouton coulissant qui n'est qu'une case à cocher à l'intérieur. Comment puis-je utiliser l'utilisation qu'au lieu d'un bouton HTML hardcore, si vous savez ce que je veux dire? Merci pour l'aide Tho!
Sûr. J'ai mis à jour l'extrait pour inclure un exemple où vous prenez l'état vérifié / décoché d'une case à cocher et appliquez la classe en fonction de celle-ci.
Il y a quelques façons de faire cela, mais cela dépend vraiment de ce que ressemble au reste de votre projet. Si vous utilisez un cadre tel que échantillon: Dans cet exemple, tout ce qu'il fait est de basculer la couleur de fond et la couleur du texte, mais vous pouvez l'affecter Toute classe ou élément en ajoutant le modificateur de TobglecLass devant celui-ci (par exemple, réacteur pour JavaScript ou django pour Python, je suggère de rechercher une bibliothèque thématique comme composants de style pour vous aider. Si vous utilisez un CSS ordinaire et JavaScript, ce que je suppose, vous pouvez créer une simple fonction de bascule JavaScript qui bascule une classe sur l'élément principal . Ensuite, vous pouvez créer vos styles en conséquence. html.invertd h1.myheading ).
Salut! Merci beaucoup pour cela. Je comprends que cela pourrait être loin de moi de penser à quelque chose comme celui-ci comme un débutant, mais pensez-vous qu'il est possible d'avoir une petite période de transition car la page est inversée de la couleur du Blanc au noir?
Oui! Essayez de regarder dans la transition CSS Propriété: w3schools.com/css/css3_transitions .asp Donc, si vous vouliez transmettre l'arrière-plan de blanc à noir en 0.3 secondes, vous pouvez ajouter le style transition: arrière-plan 0,3s; .