Is there any way to set a style for a DOM object with a variable?

Question

I have here some code, in which I am trying to change all of something on a page.

var allElements = document.getElementsByTagName('*');

var tag = '.style.backgroundColor';
var val = 'black';

for (var i = 0; i < allElements.length;i++) {
  allElements[i] + tag = val;
}

How can I make this work?

Basically https://stackoverflow.com/questions/9336148/set-value-of-object-using-a-string-as-the-key Using the answer `setKey('style.backgroundColor', 'black', allElements[i])` — epascarello, Dec 11 '19 at 21:40

Scott Marcus · Accepted Answer · 2019-12-12T13:47:41.037

This can be done, but not the way you are doing it. You'll need to pass (as an index, using bracket notation) the CSS property name (a string) into the object returned by accessing the .style property.

Also, don't use .getElementsByTagName() as it's a 25+ year old API that returns a "live" node list, which can hurt performance. Instead, use .querySelectorAll() and loop over the returned collection with the Array.forEach() method, which is an alternative to a traditional for counting loop that is a bit easier to work with since you don't have to manage any loop counters and get direct access to the element you are iterating.

var allElements = document.querySelectorAll('*');

var tag = 'backgroundColor'; // Just store the name of the CSS property
var val = 'black';

// Use the more modern Array.forEach() method of looping
allElements.forEach(function(element){
  element.style[tag] = val; // Pass the style object's property name as an index
});

* { color:white; border:2px solid white; }

<div>This is a div<br>that spans two lines.<div>
<p>Here's a paragraph</p>
<h1>And a Heading 1</h1>

Is there any way to set a style for a DOM object with a variable?

1 Answers1