existe-t-il une fonction JavaScript pouvant modifier tous les styles CSS donnés aux autres styles CSS dans le code suivant. Voir, je veux corps , .Container1 , .button1 et toutes les autres choses dans le lien donné pour se transformer en corps.dark , conteneur1.dark etc.
4 Réponses :
Sélectionnez le bouton et écouter pour l'événement code> Cliquez sur CODE>. Chaque fois que vous cliquez sur un bouton, vous souhaitez appeler une fonction qui bouclait sur les éléments que vous avez spécifiés et utilise classlist.toggle ('Dark') code> pour ajouter ou supprimer le .Dark code> classe à ces éléments. const button = document.querySelector('#darkmode');
button.addEventListener('click', () => {
document.body.classList.toggle('dark');
});
Tout d'abord donner la même classe à tous les éléments CSS tels que dans JS déclarer un attribut pour Thema P> p> Thema code>
<div class="thema container1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div><br />
<div class="thema container2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div><br />
<button id="darkmode" onclick="Change()" class="thema button1">🌕 Lights Off!!</button>
Pourquoi ne pas adapter votre CSS afin que vous ne changasez qu'un? Gardez-le propre.
p>
<div class="container1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div><br /> <div class="container2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div><br /> <button id="darkmode" class="button1">🌕 Lights Off!!</button>
Seule une solution sensible et évolutive. Certains veulent ajouter la classe à chaque élément de la page qui est fou
Vous pouvez obtenir tous les éléments div en utilisant document.queryselectorall ("div") code>, puis itérer sur tous les éléments à l'aide de pour utiliser code> et changer son nom de classe.
var el = document.querySelectorAll("div")
function enableDarkMode(){
el.forEach((a)=>{
const className = a.className
a.className=toggleDark(className)
})
}
function toggleDark(className){
if(className.endsWith("dark")){
return className.substring(0, className.length-5)
}else{
return className+".dark";
}
}
Vous voulez dire, ajoutant des cours à ces éléments?