Modifier attribut CSS avec JavaScript

**SmashScharrer** · 26/03/2019, 16h16

Bonjour,

Je possède une div, et je voudrais qu'elle apparaisse sur ma page, lorsque je clique sur un bouton.
Pour l'instant ma div, possède un attribut : display: none;
Et je sais qu'il faut faire un "onclick", mais je ne sais pas comment faire le code JS.

Quelqu'un pourrait-il m'aider ? Merci

HTML de la Div

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<div class="Affichage_Validation">
 
<div class="Validation_Mission">
 
Mission Acceptée !
 
</div>
 
</div>

CSS de la Div

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
.Affichage_Validation{
    display: none;
}
 
.Validation_Mission{
    padding: 10px;
    background-color: rgb(0, 255, 0);
    font-size: 30px;
}

**Doksuri** · 26/03/2019, 16h40

tu as deja la bonne demarche CSS (faire une class pour l'affichage/masquage)

je completera ta demarche avec carrement un .show (ou .hide) que l'on vient ajouter aux elements
par exemple

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
.Validation_Mission{
    padding: 10px;
    background-color: rgb(0, 255, 0);
    font-size: 30px;
}
.Validation_Mission.hide { display:none; }

et ton bouton ajouter/retire la class

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
tonBouton.addEventListener('click', function() {
document.getElementsByClassName('Validation_Mission')[0].classList.add('hide'); //ou .remove()
});