Set CSS properties on multiple HTML elements

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

querySelectorAll suitable for use, but to set style you will have to iterate the result of querying and set style for each element in array — Andrey
– Andrey, Commented Mar 6, 2017 at 12:17

Pineda · Accepted Answer · 2017-03-06 13:03:44Z

1

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

edited Mar 6, 2017 at 13:03

answered Mar 6, 2017 at 12:22

Pineda

7,5933 gold badges34 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

WhoAmI Over a year ago

Thank you for an informative answer and also for notyfing the compatibility issues. Luckily only users of IE10 or later will affected by this. I'll try something similar

Pineda Over a year ago

Glad you found my answer useful :-)

Ararat Harutyunyan · Accepted Answer · 2017-03-06 12:21:36Z

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

answered Mar 6, 2017 at 12:21

Ararat Harutyunyan

9362 gold badges8 silver badges19 bronze badges

Comments

CrownedClown · Accepted Answer · 2017-03-06 12:23:35Z

0

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

answered Mar 6, 2017 at 12:23

CrownedClown

33 bronze badges

Collectives™ on Stack Overflow

Set CSS properties on multiple HTML elements

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related