在多个HTML元素上设置CSS属性

Question

I have this part of a function that sets css properties on two buttons (update, save). I'm trying to minimize the lines of code and i'm looking for a more efficient way of setting css properties on multiple HTML elements rather than writing getElementById for every element. Is querySelectorAll suitable for use in this context?

//Chris

var css = {"backgroundColor": "red","textDecoration": "line-through"};
  for (var prop in css) {   
    document.getElementById("update").style[prop] = css[prop];
    document.getElementById("save").style[prop] = css[prop];
  }

Answer 1

I'd suggest the following method

var css = {"backgroundColor": "red","textDecoration": "line-through"};
var elements = document.querySelectorAll('#update, #save');
for (var prop in css) {
    elements.forEach(function (element) {
        element.style[prop] = css[prop];
    });
}

here the querySelectorAll is used with multiple selectors

Answer 2

Yes, querySelectorAll could be used in this context. Be aware that it isn't supported in IE8 or earlier. Check out the MSN docs for some quirks .

In addition, be aware that querySelectorAll returns an array like object (a non live NodeList) so you'll have to modify your code to work with such a structure:

var css = {"backgroundColor": "red","textDecoration": "line-through"}; 

var matched = document.querySelectorAll("#update, #save");
matched.forEach(function (c){
  c.style.backgroundColor css.backgroundColor;
  c.style.textDecoration = css.textDecoration;
});

Answer 3

Using document.querySelectorAll you could do it this way.

/*declare a css class*/

.button-css{"backgroundColor": "red","textDecoration": "line-through"};

/*in javascript you can do the following*/
var buttons=document.querySelectorAll(".buttons");

buttons.forEach(function(button){
  button.classList.add('button-css');
})