javascript - apply object of style to DOM element - Stack Overflow

admin管理员组

文章数量:1289584

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)

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)

• javascript
• css

Share Improve this question Follow edited Oct 5, 2015 at 7:07 JavaScripter asked Oct 4, 2015 at 13:26 JavaScripterJavaScripter 4,8521010 gold badges3939 silver badges4545 bronze badges 5

• 2 That is an invalid object. Interchange the : and =. – Tushar Commented Oct 4, 2015 at 13:28
• You should not try and overwrite the style property with a JS object. Instead, loop through your object (for in loop), and assign each value to the style property individually. – C3roe Commented Oct 4, 2015 at 13:31
• You could do that, but you could also just add, or remove, a class-name and use CSS; which would be easier, and far more maintainable. – David Thomas Commented Oct 4, 2015 at 13:43
• @DavidThomas That's a preferred way, but sometimes it is not possible when the properties to be applied are calculated dynamically using JS – Tushar Commented Oct 4, 2015 at 13:49
• If you're considering using jQuery, you can do that easily using $('selector').css(object); – Tushar Commented Oct 4, 2015 at 13:50

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 9

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>

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

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

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

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.

本文标签： javascriptapply object of style to DOM elementStack Overflow