Comment changer les paramètres CSS après un click?

5 décembre 2019 à 15:07:44

Bonjour,

Je ne sait pas comment changer les paramètres CSS après un click sur un bouton.

Voici mon code HTML :

<div id="contenu">
   <button id=darkmode>Activer le DarkMode</button>
</div>

Mon code CSS :

#contenu{
    flex : 1 1 1000px;
    background-color : rgb(84, 84, 243);
    text-align : center;
}

et mon code JavaScript :

$("#darkmode").click(function(){
    $("#contenu").css({
        color : "white",
        backgroundColor : "black",
        fontweight : "italic",
    });
});

Malheuresement ça ne marche pas,quelqu'un peut-il m'aider ?

BrainError

5 décembre 2019 à 15:30:39

Salut,

Si tu utilises jQuery, tu as deux options :

1 - Ajouter l’événement click directement sur #darkmode (tu surveilles depuis #darkmode) :

$('#darkmode').on('click', function(){
    $('#contenu').css({
        color : 'white',
        backgroundColor : 'black',
        fontweight : 'italic',
    });
});

2 - Ajouter l'événement click sur document et surveiller #darkmode (tu surveille plus globalement depuis document) :

$(document).on('click', function(){
    $('#contenu').css({
        color : 'white',
        backgroundColor : 'black',
        fontweight : 'italic',
    });
}, '#darkmode');

La seconde façon de procéder consomme plus de ressource, mais elle peut être très utile si tu veux à tout prix que ton événement fonctionne quoiqu'il puisse advenir de l’élément #darkmode.

Ex : Si jamais tu venais a supprimer l’élément #darkmode du DOM et a en réinsérer un nouveau dans le DOM, dans le premier cas, il faudrait a nouveau exécuter le code que je t'ai donné pour surveiller 'click'.
Dans le second cas, tu n'as pas à te préoccuper de réexécuter le script, l'événement reste valable puisqu'il est attaché au document.

Le second cas peut-être vraiment très utile quand tu ajoutes des éléments au DOM programmatiquement.

DjeyhunVsa

5 décembre 2019 à 15:38:37

bizzarrement ça ne marche pas...

Je t'envoie une capture d'écran du site :

unchained77

5 décembre 2019 à 16:19:03

https://jsfiddle.net/zx452euL/

DjeyhunVsa

5 décembre 2019 à 17:26:51

ça à l'air de marcher,sauf que chez moi ça marche pas.

Je crois que il y a une erreur autre part dans mon code.

Je te l'envoie :

Mon code HTML dans le premier fichier (Patere.html) :

<!doctypehtml><htmllang="fr"><head><title>Lignum project</title><metacharset="utf-8"/>
<linkrel="stylesheet"type="text/css"href="Patere.css"><scriptsrc="jquery.js"></script><scriptsrc="script.js"></script>
</head>
<body><divid="menu"><imgid="logo"src="Logo_Lignum_Project.png"alt="Patere_Techno"><h1> Menu du site</h1><ul><liclass="onglet"id="accueil"><ahref="Patere.html">Page d'accueil</a></li><liclass="onglet"id="présentation"><ahref="Présentation_Du_Site.html">Présentation du projet</a></li><liclass="onglet"id="diaporama"><ahref="Jeu3.html">Diaporama</a></li><liclass="onglet"id="quiz"><ahref="Jeu4.html">Quiz</a></li><liclass="onglet"id="reste"><ahref="Jeu5.html">Reste</a></li></ul><ul:hover></ul></div><divid="contenu"><h1class=titresid=MssgBienvenue>Bienvenue sur le site du Lingum Project ! </h1><p></p><h3id="mssg1">Bonjour à tous,nous sommes le groupe 1 du projet.<br>Nous sommes constitués de ....,......,..... et ......<br>Nous espérons que cette présentation va pour plaire. <br>Voici une petite animation de quelques secondes pour présenter le projet :</h3><divid="troll">LOL tu as pris du temps à lire ce message...pour rien </div><br><br><videoid="video"controls = "controls"poster="Pateretechno.png"><sourcesrc="Pateretecheno2.mp4"> Il serait temps de mettre votre navigateur à jour.</video><h3id=aftervideo>Sans perdre de temps,commençons la présentation du projet.</h3></div></body><html>

Mon code HTML (deuxième fichier HTML : Présentation_du_site.html) :

<!doctypehtml><htmllang="fr"><head><title>Présentation du projet</title><metacharset="utf-8"/>
<linkrel="stylesheet"type="text/css"href="Présentation_Du_Site.css"><linkrel="stylesheet"type="text/css"href="Patere.css"><scriptsrc="jquery.js"></script><scriptsrc="Patere.js"></script></head>
<body><divid="menu"><imgid="logo"src="Logo_Lignum_Project.png"alt="Patere_Techno"><h1> Menu du site</h1><ul><liclass="onglet"id="accueil"><ahref="Patere.html">Page d'accueil</a></li><liclass="onglet"id="présentation"><ahref="Présentation_Du_Site.html">Présentation du projet</a></li><liclass="onglet"id="diaporama"><ahref="Jeu3.html">Diaporama</a></li><liclass="onglet"id="quiz"><ahref="Jeu4.html">Quiz</a></li><liclass="onglet"id="reste"><ahref="Jeu5.html">Reste</a></li></ul><ul:hover></ul></div><divid="contenu"><h1class="titres"id="titre">Présentation du projet </h1><buttonid="darkmode">Activer le DarkMode</button></div></body>
</html>

Mon code CSS (premier fichier CSS : Patere.css)

html,body {width : 100%;height : 100%;margin : 0px;display : flex;flex-wrap : wrap;}
a{text-decoration : none ; /* enlève le style de base sur les liens */}
div{background :rgb(84, 84, 243);/*border : 2px dashed blue; */text-align : center;color : white;}
.titres{color : orange;}

#menu{flex : 00350px;color : rgb(255, 0, 0);background-color : Magenta;}
#menuul{list-style-type : none;padding : 0px;}
#menuulli{margin : 15px0px;background-color : white;width : 200px;padding : 4px0px;display : inline-block;margin : 8px0px;box-shadow : black2px4px10px;border-radius : 25%;}
#menuulli:hover{box-shadow : none;cursor: pointer;}
#logo{width : 75%;}
#logo2{width : 10%;}
#video{width : 65%;}

#contenu{flex : 111000px;background-color : rgb(84, 84, 243);text-align : center;}
.li:hover{box-shadow : none;cursor : hand;}
#mssg1{color : white;}
#troll{animation : "troll"2sinfinite;text-decoration: blink;color : rgb(100, 100, 243);}
@keyframestroll{ 0%{opacity: 1;} 1%{opacity: 0} 25%{opacity: 1} 26%{opacity: 0} 50%{opacity: 1} 51%{opacity: 0} 75%{opacity: 1} 76%{opacity: 0} 100%{opacity: 1}/*90%{opacity: 0} 100%{opacity: 1} *//* 40%{opacity: 0} 44%{opacity: 1} 48%{opacity: 0} 52%{opacity: 1} 56%{opacity: 0} 60%{opacity: 1} 64%{opacity: 0} 68%{opacity: 1} 72%{opacity: 0} 76%{opacity: 1} 80%{opacity: 0} 84%{opacity: 1} 88%{opacity: 0} 92%{opacity: 1} 96%{opacity: 0} 100%{opacity: 1} */
/* 0%{opacity: 1;} 50%{opacity: 0;} 100%{opacity: 1;} */}
#aftervideo{color : white;}

Mon code CSS (deuxième fichier CSS : Présentation_du_site.html)

#titre{color:red; animation: colorblink 2sinfinite , titre 1.5sinfinite; }
@keyframescolorblink { 0% {color:red;} 50%{color: orangered} 100%{color : orange;}}
@keyframestitre{ 0%{opacity:1;} 50%{opacity: 0} 100%{opacity: 1}/* 60%{opacity: 0.25} 80%{opacity: 0.5;} 100%{opacity: 0;} */}

Et le fichier javascript (Patere.js) :

$("#darkmode").click(function(){

$("#contenu").css({

color :"white",

backgroundColor :"black",

fontweight :"italic",

});

})

unchained77

6 décembre 2019 à 9:15:57

balise de code

DjeyhunVsa

6 décembre 2019 à 12:16:30

quoi balise de code ?

Qu'est ce que ça veut dire ?

unchained77

6 décembre 2019 à 12:44:06

<html></html>

Lucky13

6 décembre 2019 à 14:37:59

Hello,

exemples en JS sans jQuery: https://jsfiddle.net/steph_lucky13/nd0d9pkv/

ou https://jsfiddle.net/steph_lucky13/e6LLw9mt/

❶ Feuille de style introuvable ❷ Chemins relatifs et absolus ❸ addEventListener & API Selectors ❹ Paletton colors ❺ Animations complexes en JS & CSS