Javascript: Set CSS Styles Dynamically with Variable

Javascript Code Function to Set CSS Styles via Javascript, Dynamically, Without Having to Know in Advance Which Style you want to Set. You can also Change MULIPLE Properties at the Same Time

Home Short:

How to set css style with Javascript dynamically using a variable for the dom style property. In other words, instead of having to explicitly elem.style.background = '#eee', elem.style(javascript variable) = '';

The most portable and reusable way to be able to set dom element style properties using any property you wish, using the simple Javascript function below.

/* ------------------------------------------------------
  SET AN INLINE CSS STYLE FOR AN ELEMENT(s) DYNAMICALLY
  
    [elem] 
    Element to style. Can be array which allows 
    changing of a style for multiple elements same time.
    
    [arrPropertyVals] 
    Css property(s) to change. If [elem] is a single
    element and not array, multiple properties can be
    changed in one function call. Make sure to supply
    equal number of [value] values as [arrPropertyVals]
                      
    
    [arrValues] 
    Value of the property. If [elem] is a single
    element and not array, multiple properties can be
    changed in one function call. Make sure to supply
    equal number of [value] values as [arrPropertyVals]
   ----------------------------------------------------- */
function setStyle
(
 elem, 
 arrPropertyVals, 
 arrValues
)
{
  // means this is a single elem and not array so multiple
  // properties can be set. be sure to include equal 
  // number of [arrPropertyVals] as [arrValues]
 if(elem.length == undefined){
     for(let i = 0; i < arrPropertyVals.length; i++){
        elem.style[arrPropertyVals[i]] = arrValues[i]; 
     }
 }else{
      // this way styles can be set for array 
      // of elements as well as single elements
     elem.forEach(function (el) {
        el.style[arrPropertyVals] = arrValues;
     });
 }
}

Example of how to use, if you want to change the fontsize of a paragraph element:

setStyle(document.querySelectorAll('p'), 'fontSize', '24px')

Example of how to use, if you want to change multiple properties of an element at the same time:

setStyle(document.querySelectorAll('#divexample'), ['backcolor', 'color', 'position'], ['#fff', 'green', 'absolute'])

source code home