如何在JavaScript中设置多个样式？
如何在JavaScript中设置多个样式？
提问于 2010-10-19 21:03:00
我有以下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 回答 22
Stack Overflow用户
回答已采纳
发布于 2010-10-19 21:21:28
如果将CSS值设置为字符串，并且没有为元素设置其他CSS值(或者您不关心覆盖)，则使用cssText property
document.getElementById("myElement").style.cssText = "display: block; position: absolute";您还可以使用template literals实现更简单、可读性更好的多行CSS式语法：
document.getElementById("myElement").style.cssText = `
display: block;
position: absolute;
`;这在某种意义上是好的，因为它避免了每次更改属性时都重新绘制元素(以某种方式“一次”更改所有属性)。
另一方面，您必须首先构建字符串。
Stack Overflow用户
发布于 2015-12-28 17:07:21
Object.assign(yourelement.style,{fontsize:"12px",left:"200px",top:"100px"});这也使您能够合并样式，而不是重写CSS样式。
您还可以创建快捷功能：
const setStylesOnElement = function(styles, element){
Object.assign(element.style, styles);
}Stack Overflow用户
发布于 2012-12-05 21:16:19
@Mircea:在一条语句中为一个元素设置多种样式非常容易。它不会影响现有的属性，并且避免了使用循环或插件的复杂性。
document.getElementById("demo").setAttribute(
"style", "font-size: 100px; font-style: italic; color:#ff0000;");请注意:如果以后使用此方法添加或更改样式属性，则以前使用'setAttribute‘设置的属性将被擦除。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3968593
复制相关文章
相似问题