Javascript (pure): Set many style attributes using list of values from array

Question

I'm working on a JS class that creates several elements and attaches them to the DOM, and I would like for the class to also set the style attribute properties of those elements. I have a function already that does this for other attributes:

function setAttrs(el, attrValArray){
    for(var i=0; i<attrValArray.length;i++){
        el.setAttribute(attrValArray[i][0],attrValArray[i][1]);
    }
}

The attrValArray input is a 2D array that would look something like

attrValArray = [["class","container"],["id","cc1]];

So what I want is to be able to create a similar array for style property pairs such as:

propValArray = [["display","inline-block"],["position","relative"]];

Which I would then pass to a similar setStyles function.

I could use the same setAttribute method, but instead of looping over the array and setting attributes individually I would have to construct a long string and pass the whole thing as the second argument of setAttribute since I am actually setting many properties of only 1 attribute. But I'd like to avoid this because of the fact that it would override any existing inline styles (not that I use inline styles, but for the sake of principle).

The better option is to set the properties of style on the element. I.e.

el.style.<property-to-set> = "property value";

This does not overwrite anything other than the specific property being set. But I don't see any way to select the "property-to-set" using values from a list. Is there an appropriate way around this?

To be clear, I already know that I can simply assign the desired style attributes to the to-be-created element classes/ids, and was actually wondering if that is the technically correct thing to do based on "good practices" and whatnot. That is what I plan on doing if there is no satisfying alternative.

Also, as stated in the question, I'm strictly interested in a pure JS solution, no JQuery or any other such library/framework.

If you had objects like const attrs = {class: "container", id: "cc1"}; and const css = {display: "inline-block", position: "relative"};, all you’d need to do is Object.assign(Object.assign(el, attrs).style, css);. — Sebastian Simon
– Sebastian Simon, Commented Jan 25, 2018 at 22:39
instead of setting CSS attributes inline why not toggle CSS classes on/off with .classListmethods? — Ronnie Smith
– Ronnie Smith, Commented Jan 25, 2018 at 22:46

skyline3000 · Accepted Answer · 2018-01-25 22:34:11Z

1

I don't see any way to select the "property-to-set" using values from a list.

Unless I'm misunderstanding the question, you would do it pretty much the exact same way:

function setStyles(el, cssArray){
  for(var i=0; i<cssArray.length;i++){
    el.style[cssArray[i][0]] = cssArray[i][1];
  }
}

Remember with objects, you can access properties using dot notation object.property or bracket notation object['property']. When you use bracket notation, the text inside the brackets is evaluated, just like when looking up indexes in an array (arrays are really just special objects with number properties).

Alternatively, you could build one long string out of all the property/values pairs and use setAttribute or cssText:

function setStyles(el, cssArray){
  let cssText = '';
  for(var i=0; i<attrValArray.length;i++){
    cssText += cssArray[i][0] + ':' + cssArray[i][1] + ';';
  }
  el.style.cssText = cssText;
  // or el.setAttribute('style', cssText);
}

answered Jan 25, 2018 at 22:34

skyline3000

7,9212 gold badges26 silver badges34 bronze badges

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

1 Comment

Josh Wiens Over a year ago

I believe this is exactly what I needed! I actually didn't know bracket notation was a thing in this context, but if it works how you say it does it will be perfect for my application. Thank you!

Collectives™ on Stack Overflow

Javascript (pure): Set many style attributes using list of values from array

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related