在Javascript函数中添加多种样式不起作用答案

【问题标题】：Adding multiple style in Javascript function not working在Javascript函数中添加多种样式不起作用
【发布时间】：2018-05-03 05:01:23
【问题描述】：

我有一个 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"

这个功能不可以添加多种样式吗？那么我该如何解决这个问题。

【问题讨论】：

在 DOM（和 Javascript）中，属性名称是 camelCase (.style.boxShadow)。只有在 CSS 中它们是 kebab-case。ツ
你的项目中有 Jquery 吗？
不，没有 Jquery

标签： javascript html css button

【解决方案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"
  }
}

&lt;button id="pause" class="pause" onclick="event_click_startpause(this);"&gt;Pause&lt;/button&gt;

工作正常！

【讨论】：

【解决方案2】：

您可以添加尽可能多的样式，但样式的名称是驼峰式，而不是您现在用于 box-shadow 的 kebab-case。

因此你有两个选择，要么使用btn.style.boxShadow = "0px 0px 0px 3px #173B0B"

或者如果你想使用 kebab-case，你可以像这样使用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";

【讨论】：

【解决方案3】：

易于理解的解决方案

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

&lt;button id="pause" class="pause" onclick="event_click_startpause();"&gt;Pause&lt;/button&gt;

【讨论】：