apply object of style to DOM element

Question

I know we can use .style to apply css to DOM element like this:

document.getElementById("test").style.color="red";

I am wondering, if it is possible to apply a style object, something like this:

newStyle: {
  position : 'fixed';
  width : '300px';
  height : '20px';
  top : '0';
}

how to apply newStyle by using .style , is it possible? ( We are not using jQuery here)

Answer 1

You can use Object.assign :

Object.assign(myElement.style, {
  width: '300px',
  height: '20px'
});

 Object.assign(document.getElementById("test").style, { position: 'fixed', width: '300px', height: '100px', top: '0' }); 

 <div id="test" style="background: green"></div> 

Answer 2

you can loop through properties of styles as -

  var newStyle = {
  position : 'fixed',
  width : '300px',
  height : '20px',
  top : '0'
};

for (i in newStyle)
  document.getElementById("test").style[i] = newStyle[i];

Answer 3

Try this:

 var mystyle = { color: 'red' }; for (var property in mystyle) { if (mystyle.hasOwnProperty(property)) { document.getElementById("updateStyle").style[property] = mystyle[property]; } } 

 <p id="updateStyle">Hi This is demo text.</p> 

replace updateStyle with your own id

Answer 4

Applying rule by rule is bad. It makes the browser re-render multiple times. You can apply all the changes in one shot - by using cssText

So, in your case, you need to convert the object into a string and then apply all the styles in one shot:

var newStyle = {
  position: 'fixed',
  width: '300px',
  height: '20px',
  top: '0'
}

var styles = [];
for(var rule in newStyle) styles.push(rule+': '+newStyle[rule]);

document.getElementById("test").style.cssText = styles.join(';');

Answer 5

You can extend the prototype of the " HTMLElement ". Add a method to loop through a object containing the style information. You can do it like this:

HTMLElement.prototype.applyStyleObject = function (styleObject) {
  for (var item in this.style) {

    var objProp = styleObject[item];

    if (objProp !== undefined) {
      this.style[item] = objProp;
    }

  }
}

I've done a first prototype as an example how to use this in the wild :):

 //The object containing the style elements var obj = { width: "200px", height: "100px" } var spanobj = { color: "red" } //Cached the div node var divNode = document.getElementById("div"); //Extend the HTMLElement prototype HTMLElement.prototype.applyStyleObject = function (styleObject) { for (var item in this.style) { var objProp = styleObject[item]; if (objProp !== undefined) { this.style[item] = objProp; } } } //Execute the new method divNode.applyStyleObject(obj); document.getElementById("span").applyStyleObject(spanobj); document.getElementsByTagName("figure")[0].applyStyleObject(obj); 

 div { border: solid 1px black; } figure { border: solid 1px black; } 

 <div id="div"></div> <span id="span">This is a span tag</span> <figure></figure> 

If you've extended the prototype of an javascript object, it applies to all newly created instances of that kind of object.