我有以下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
当前回答
使用纯Javascript，你不能一次设置所有的样式;您需要为它们每个使用单行。
但是，您不必重复document.getElementById(…).style。一遍又一遍地编码;创建一个对象变量来引用它，你会让你的代码更易于阅读:
var obj=document.getElementById("myElement").style;
obj.top=top;
obj.left=left;
…等。比您的示例更容易阅读(坦白地说，和jQuery一样容易阅读)。
(如果Javascript设计正确，你也可以使用with关键字，但最好不要使用它，因为它会导致一些讨厌的名称空间问题)
其他回答
在Javascript中设置多个css样式属性
document.getElementById("yourElement").style.cssText = cssString;
or
document.getElementById("yourElement").setAttribute("style",cssString);
例子:
document
.getElementById("demo")
.style
.cssText = "margin-left:100px;background-color:red";
document
.getElementById("demo")
.setAttribute("style","margin-left:100px; background-color:red");
var styles = {
"background-color": "lightgray",
"width": "500px",
"height": "300px"
};
/
var obj = document.getElementById("container");
Object.assign(obj.style, styles);
最好的办法是创建一个函数来自己设置样式:
var setStyle = function(p_elem, p_styles)
{
var s;
for (s in p_styles)
{
p_elem.style[s] = p_styles[s];
}
}
setStyle(myDiv, {'color': '#F00', 'backgroundColor': '#000'});
setStyle(myDiv, {'color': mycolorvar, 'backgroundColor': mybgvar});
请注意，您仍然必须使用javascript兼容的属性名称(因此使用backgroundColor)
对我来说最简单的方法就是使用字符串/模板字面值:
elementName.style.cssText = `
width:80%;
margin: 2vh auto;
background-color: rgba(5,5,5,0.9);
box-shadow: 15px 15px 200px black; `;
伟大的选择，因为你可以使用多行字符串，使生活更容易。
查看字符串/模板文字在这里:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
@Mircea:在一条语句中为一个元素设置多种样式非常容易。 它不会影响现有的属性，并避免了循环或插件的复杂性。
document.getElementById("demo").setAttribute(
"style", "font-size: 100px; font-style: italic; color:#ff0000;");
注意:如果以后使用此方法添加或更改样式属性，之前使用'setAttribute'设置的属性将被擦除。
