我有以下JavaScript变量:
var fontsize = "12px"
var left= "200px"
var top= "100px"
我知道我可以像这样迭代地将它们设置为我的元素:
document.getElementById("myElement").style.top=top
document.getElementById("myElement").style.left=left
有没有可能把它们都放在一起，就像这样?
document.getElementById("myElement").style = allMyStyle
当前回答
使用ES6+，你也可以使用反引号，甚至直接从某个地方复制css:
const $div = document.createElement('div') 美元的div。innerText = 'HELLO' div.style美元。cssText = ' Background-color: rgb(26, 188, 156); 宽度:100 px; 高度:30 px; border - radius: 7 px; text-align:中心; padding-top: 10 px; 粗细:大胆的; ｀ document.body.append (div)美元
其他回答
@Mircea:在一条语句中为一个元素设置多种样式非常容易。 它不会影响现有的属性，并避免了循环或插件的复杂性。
document.getElementById("demo").setAttribute(
"style", "font-size: 100px; font-style: italic; color:#ff0000;");
注意:如果以后使用此方法添加或更改样式属性，之前使用'setAttribute'设置的属性将被擦除。
这是一个旧线程，所以我认为对于任何寻找现代答案的人来说，我建议使用Object.keys();
var myDiv = document.getElementById("myDiv");
var css = {
"font-size": "14px",
"color": "#447",
"font-family": "Arial",
"text-decoration": "underline"
};
function applyInlineStyles(obj) {
var result = "";
Object.keys(obj).forEach(function (prop) {
result += prop + ": " + obj[prop] + "; ";
});
return result;
}
myDiv.style = applyInlineStyles(css);
强类型的typescript:
对象。Assign方法很好，但是使用typescript你可以像这样自动完成:
const newStyle: Partial<CSSStyleDeclaration> =
{
placeSelf: 'centered centered',
margin: '2em',
border: '2px solid hotpink'
};
Object.assign(element.style, newStyle);
注意属性名是驼峰形的，没有破折号。
这甚至会告诉你它们何时被弃用。
我们可以在Node原型中添加styles函数:
Node.prototype.styles=function(obj){ for (var k in obj) this.style[k] = obj[k];}
然后，在任意节点上调用styles方法:
elem.styles({display:'block', zIndex:10, transitionDuration:'1s', left:0});
它将保留任何其他现有的样式，并覆盖对象参数中的值。
var styles = {
"background-color": "lightgray",
"width": "500px",
"height": "300px"
};
/
var obj = document.getElementById("container");
Object.assign(obj.style, styles);
