Добавление нескольких стилей в функцию Javascript не работает

Question

У меня есть функция JavaScript для изменения стиля кнопки при нажатии кнопки.

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"
    }
}

Здесь я хочу добавить другой стиль для кнопки. Для этого я добавил это также

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

Разве нельзя добавить несколько стилей в эту функцию? Так как я могу это исправить.

Answer 1

Вы можете добавить столько стилей, сколько возможно, но названия стилей находятся в camelCase, а не в кебаб-кейсе, который вы сейчас используете для box-shadow.

Поэтому у вас есть два варианта, либо используйте btn.style.boxShadow = "0px 0px 0px 3px #173B0B"

Или, если вы хотите использовать кебаб-кейс, вы можете использовать style.cssText, например:

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

Обратите внимание, что вы можете указать несколько правил CSS одновременно, используя технику, упомянутую выше, поэтому вы можете сделать это:

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

Answer 2

Простое в понимании решение

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>

Answer 3

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>

Работает отлично!