Question

我知道我们可以使用.style将css应用于DOM元素，如下所示：

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

我想知道，如果可以应用样式对象，可以这样：

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

如何使用newStyle来应用.style，是否可能？（我们这里没有使用jQuery）

Answer 1

您可以使用Object.assign：

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

你可以将样式的属性循环为 -

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

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

Answer 3

试试这个：

＆＃13;

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

＆＃13;

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

＆＃13;

将updateStyle替换为您自己的ID

Answer 4

按规则应用规则很糟糕。它使浏览器重新渲染多次。您可以一次性应用所有更改 - 使用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(';');

Answer 5

您可以扩展＆＃34; HTMLElement＆＃34;的原型。添加一个方法来遍历包含样式信息的对象。你可以这样做：

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

    var objProp = styleObject[item];

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

  }
}

我已经做了第一个原型作为例子如何在野外使用它：）：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

如果您已扩展javascript对象的prototype，则它适用于所有新创建的该对象的实例。

将样式对象应用于DOM元素

5 个答案: