L'ajout de plusieurs styles dans une fonction Javascript ne fonctionne pas

Question

J'ai une fonction javascript pour changer le style d'un bouton lorsqu'il est cliqué.

HTML

<button id="pause" class="pause" onclick="event_click_startpause(this);">Pause</button>

Javascript

window.event_click_startpause = function(btn) {
    if (interval === null) {
        start();
        btn.innerText = 'pause';
        btn.style.backgroundColor = "#c1580b";
        btn.style.box-shadow= "0px 0px 0px 3px #173B0B"
    }
}

Ici, je veux ajouter un autre style pour le bouton. Pour cela, j'ai aussi ajouté ceci

btn.style.box-shadow= "0px 0px 0px 3px #173B0B"

N'est-il pas possible d'ajouter plusieurs styles dans cette fonction ? Alors comment puis-je résoudre ce problème ?

Answer 1

function event_click_startpause(btn) {
  interval = null;
  if (interval === null) {
    // start();
    btn.innerText = 'pause';
    btn.style.backgroundColor = "#c1580b";
    btn.style.boxShadow = "0px 0px 0px 3px #173B0B"
  }
}

<button id="pause" class="pause" onclick="event_click_startpause(this);">Pause</button>

Ça marche bien !

Answer 2

Vous pouvez ajouter autant de styles que possible, mais les noms des styles sont en camelCase et non en kebab-case comme c'est le cas en ce moment pour box-shadow .

Vous avez donc deux options, soit utiliser btn.style.boxShadow = "0px 0px 0px 3px #173B0B"

Ou si vous voulez utiliser la casse kebab vous pouvez utiliser style.cssText comme ça :

btn.style.cssText = "box-shadow: 0px 0px 0px 3px #173B0B";

Notez que vous pouvez spécifier plusieurs règles css en même temps en utilisant la technique mentionnée ci-dessus ; vous pouvez donc le faire :

btn.style.cssText = "box-shadow: 0px 0px 0px 3px #173B0B; background-color: #c1580b";

Answer 3

Une solution facile à comprendre

function event_click_startpause() {
    document.getElementById("pause").setAttribute(
       "style", "background-color:#c1580b;box-shadow:0px 0px 0px 3px #173B0B;");
}

<button id="pause" class="pause" onclick="event_click_startpause();">Pause</button>