CODEWITHSUNDEEP
javascriptcss
JavaScripter
JavaScripter

Reputation: 4842

apply object of style to DOM element

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)

Upvotes: 2

Views: 3965

Answers (5)

OddDev
OddDev

Reputation: 3734

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.

Upvotes: 0

Sarjan Desai
Sarjan Desai

Reputation: 3733

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 updateStylewith your own id

Upvotes: 1

Oriol
Oriol

Reputation: 288130

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>

Upvotes: 9

metal03326
metal03326

Reputation: 1263

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(';');

Upvotes: 1

Shrinivas Pai
Shrinivas Pai

Reputation: 7701

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];

Upvotes: 0

Related Questions