Changing large chunk of style with JavaScript

Question

I have the following function that resets a button and applies styling once it is executed:

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

}

However, as you can see, it is getting repetitive to change each style element in the function. Especially if I want this style to be applied:

#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;
}

Is there a way in JavaScript to link to an entire block of style code?

http://stackoverflow.com/questions/3968593/how-to-set-multiple-css-style-properties-in-javascript — Sandeep Nayak, Jan 06 '17 at 05:12
why not just add class to element. And set CSS to that class — Nishanth Matha, Jan 06 '17 at 05:13
So so far you can set it by making a string or setting it to a class. What is best practice in web dev? — alexp2603, Jan 06 '17 at 05:14
You could add your Style class to the element: `document.getElementById("start_button").className+=" newClass";` in this case you have to set the `.newClass` style attributes in your css — d3vi4nt, Jan 06 '17 at 05:22
So I would declare the new style as: #start_button clicked{ [...] }? — alexp2603, Jan 06 '17 at 05:28

score 0 · Answer 1 · answered Jan 06 '17 at 05:30

If you change the start_button to a class; which it should be because there will be more than one of them on the page; you can use the className property.

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

Look like you are creating buttons so you can grab the buttons JS:

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

Changing large chunk of style with JavaScript

1 Answers1