Javascript Code Function to Change Multiple CSS Simutaneously

Javascript Code Function to Change Multiple CSS Values for an Element Simutaneously Overwriting Only the CSS Styles you Set in the Function Leaving Other Inline CSS Styles Intact and Unchanged

/* -------------------------------------------------------------- function which simplifies the changing of css values using javascript with one line function call. Any element that can be changed via elem.style such as elem.style.left or elem.style.color etc can be changed with one line function call Example: let btnApply = document.querySelector("#btn"); massCSS(btnApply, {"height":"120px", "width":"400px", "color":"red"}); -------------------------------------------------------------- */ function massCSS(el, {...cssValuePairsObject}) { for (const key in cssValuePairsObject) { // [setProperty] instead of [el.style.value] prevents // overwrite of previously assigned inline values el.style.setProperty(key, cssValuePairsObject[key]); } }

Example Usage of Mass CSS Changer Javascript Code.

// assuming element exists with id="btnApply" let btnApply = document.querySelector("#btnAppy"); massCSS(btnApply, {"height":"120px", "width":"400px", "color":"red", "font-size":"30px", "background-color":"yellow"});