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

＆＃13;

#...
for i in self.cursor:   
   # self.cbSubjects['values'] = (i) , this is bad, change it like this:
   self.cbSubjects['values'] = self.cbSubjects['values'] + (i, )
   # ... rest of your program

＆＃13;

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

＆＃13;

工作正常！

Answer 2

您可以添加尽可能多的样式，但样式的名称在camelCase中，而不是kebab-case，正如您现在使用的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 3

易于理解解决方案

＆＃13;

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

＆＃13;

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

＆＃13;

在Javascript函数中添加多个样式不起作用

3 个答案: