Bonjour,
J'ai une structure de base :
/index.html
/css/styles.css
/scriptsjs/index.js
/images/play.png
/images/pause.png
avec :

index.html :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html lang="fr">
<link href="./css/styles.css" rel="stylesheet" />
<script type="text/javascript" src="./scriptsjs/index.js"></script>
<body>
    <button id="playStop" name="button" class="bouton boutonPlayStop" onclick="changerBoutonPlayStop();"></button>
</body>
</html>

styles.css :
Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
:root {
    --URL_IMAGE_PAUSE : url(./../images/pause.png);
    --URL_IMAGE_PLAY : url(./../images/play.png);
}
 
main {
    display: flex;
    justify-content: center;
}
 
.bouton {
    height: 55px;
    width: 55px;
    background-position: center; 
    background-repeat: no-repeat;
    background-size: 45px 45px;
}
 
.boutonPlayStop {
    background-image: var(--URL_IMAGE_PLAY) ;
}

et index.js :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
function changerBoutonPlayStop() {
    const boutonPlayStop = document.getElementById("playStop");
    boutonPlayStop.setAttribute("style", "background-image:var(--URL_IMAGE_PAUSE)");
}
Hélas, ça ne marche pas...
Lorsque je clique sur le bouton "play", l'image du bouton play disparaît, je ne vois aucune erreur dans l'outil de développement de FF, mais pas de remplacement de l'image (background-image) par "pause".
Par contre je vois une chose étrange que je ne comprends pas : j'ai
Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
.boutonPlayStop {
  background-image: var(--URL_IMAGE_PLAY);
}
qui est barré :
background-image: var(--URL_IMAGE_PLAY);
et un nouveau bloc apparaît au-dessus intitulé "élément" noté "inline" :
Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
élément {
  background-image: var(--URL_IMAGE_PAUSE);
}

C'est la première fois que j'utilise ce genre de syntaxe, j'imagine que j'ai loupé une marche...
Merci pour votre aide !