Question

我有reset一个button的以下函数，并在执行后应用样式：

function reset(){
    var boxes = getBoxes();
    for(i = 0 ; i < boxes.length; i++) {
        boxes[i].innerHTML = "";
    }
document.getElementById("start_button").innerHTML = "Start Game";
document.getElementById("start_button").setAttribute('onclick', 'gameStart()');
document.getElementById("start_button").style.color = "black";
document.getElementById("start_button").style.backgroundColor = "lightgreen";

}

然而，正如您所看到的，更改函数中的每个样式元素变得越来越重要。特别是如果我想要应用这种风格：

#button{
    text-align: center;
}
#start_button{
    width: 10%;
    height: 50px;
    margin-top: 4%;
    margin-left: auto;
    margin-right: auto;
    background: lightgreen;
    color:black;
}

#start_button:hover {
    background: green;
    color: white;
}

JavaScript中有没有办法链接到整个样式代码块？

Answer 1

如果将start_button更改为类;这应该是因为页面上会有不止一个;你可以使用className属性。

CSS：

.start_button{
    width: 10%;
    height: 50px;
    margin-top: 4%;
    margin-left: auto;
    margin-right: auto;
    background: lightgreen;
    color:black;
}

.start_button:hover{
    background:green;
    color: white;
}

看起来您正在创建按钮，因此您可以抓住按钮 JS：

document.getElementsByTagName("button").className = "start_button";

使用JavaScript更改大块样式

1 个答案: