我有以下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
当前回答
@Mircea:在一条语句中为一个元素设置多种样式非常容易。 它不会影响现有的属性，并避免了循环或插件的复杂性。
document.getElementById("demo").setAttribute(
"style", "font-size: 100px; font-style: italic; color:#ff0000;");
注意:如果以后使用此方法添加或更改样式属性，之前使用'setAttribute'设置的属性将被擦除。
其他回答
不要认为这是可能的。
但是你可以用样式定义创建一个对象，然后循环遍历它们。
var allMyStyle = {
fontsize: '12px',
left: '200px',
top: '100px'
};
for (i in allMyStyle)
document.getElementById("myElement").style[i] = allMyStyle[i];
为了进一步开发，为它创建一个函数:
function setStyles(element, styles) {
for (i in styles)
element.style[i] = styles[i];
}
setStyles(document.getElementById("myElement"), allMyStyle);
请考虑使用CSS添加样式类，然后用JavaScript添加该类 classList &简单的add()函数。
style.css
.nice-style {
fontsize : 12px;
left: 200px;
top: 100px;
}
JavaScript脚本
const addStyle = document.getElementById("myElement"); addStyle.classList.add(“nice-style”);
使用纯Javascript，你不能一次设置所有的样式;您需要为它们每个使用单行。
但是，您不必重复document.getElementById(…).style。一遍又一遍地编码;创建一个对象变量来引用它，你会让你的代码更易于阅读:
var obj=document.getElementById("myElement").style;
obj.top=top;
obj.left=left;
…等。比您的示例更容易阅读(坦白地说，和jQuery一样容易阅读)。
(如果Javascript设计正确，你也可以使用with关键字，但最好不要使用它，因为它会导致一些讨厌的名称空间问题)
我认为这是一种非常简单的解决上述所有问题的方法:
const elm = document.getElementById("myElement")
const allMyStyle = [
{ prop: "position", value: "fixed" },
{ prop: "boxSizing", value: "border-box" },
{ prop: "opacity", value: 0.9 },
{ prop: "zIndex", value: 1000 },
];
allMyStyle.forEach(({ prop, value }) => {
elm.style[prop] = value;
});
下面的innerHtml是否有效
var styleElement = win.document.createElement("STYLE"); styleElement。innerHTML = "#notEditableVatDisplay {display:inline-flex} #editableVatInput，.print-section, i.a a.fa-sort. "点击排序{显示:none !重要}";
