将样式对象应用到DOM元素

apply object of style to DOM element

本文关键字：DOM 元素 应用 样式 对象      更新时间：2023-09-26

我知道我们可以使用.style来应用css到DOM元素，像这样:

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

我想知道，如果有可能应用一个样式对象，像这样:

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

如何用.style代替newStyle，是否可行?(这里我们没有使用jQuery)

您可以使用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>

你可以遍历样式的属性-

  var newStyle = {
  position : 'fixed',
  width : '300px',
  height : '20px',
  top : '0'
};
for (i in newStyle)
  document.getElementById("test").style[i] = newStyle[i];

逐个规则应用是不好的。它使浏览器重新渲染多次。你可以通过使用cssText

一次性应用所有的更改

所以，在你的例子中，你需要将对象转换成一个字符串，然后一次性应用所有的样式:

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

试试这个:

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>

用自己的id替换updateStyle

可以扩展"HTMLElement"的原型。添加一个方法来循环遍历包含样式信息的对象。你可以这样做:

HTMLElement.prototype.applyStyleObject = function (styleObject) {
  for (var item in this.style) {
    var objProp = styleObject[item];
    if (objProp !== undefined) {
      this.style[item] = objProp;
    }
  }
}

我已经做了第一个原型作为一个例子，如何在野外使用这个:):

//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>

如果你扩展了一个javascript对象的原型，它适用于所有新创建的这种对象的实例。

相关文章：