我有以下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 

当前回答

请考虑使用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”);

其他回答

使用Object.assign:

Object.assign(yourelement.style,{fontsize:"12px",left:"200px",top:"100px"});

这也让你能够合并样式,而不是重写CSS样式。

你也可以创建一个快捷功能:

const setStylesOnElement = function(styles, element){
    Object.assign(element.style, styles);
}

参见…在

例子:

var myStyle = {};
myStyle.fontsize = "12px";
myStyle.left= "200px";
myStyle.top= "100px";
var elem = document.getElementById("myElement");
var elemStyle = elem.style;
for(var prop in myStyle) {
  elemStyle[prop] = myStyle[prop];
}

下面的innerHtml是否有效

var styleElement = win.document.createElement("STYLE"); styleElement。innerHTML = "#notEditableVatDisplay {display:inline-flex} #editableVatInput,.print-section, i.a a.fa-sort. "点击排序{显示:none !重要}";

使用纯Javascript,你不能一次设置所有的样式;您需要为它们每个使用单行。

但是,您不必重复document.getElementById(…).style。一遍又一遍地编码;创建一个对象变量来引用它,你会让你的代码更易于阅读:

var obj=document.getElementById("myElement").style;
obj.top=top;
obj.left=left;

…等。比您的示例更容易阅读(坦白地说,和jQuery一样容易阅读)。

(如果Javascript设计正确,你也可以使用with关键字,但最好不要使用它,因为它会导致一些讨厌的名称空间问题)

因为字符串支持添加,你可以很容易地添加你的新样式,而不需要覆盖当前的样式:

document.getElementById("myElement").style.cssText += `
   font-size: 12px;
   left: 200px;
   top: 100px;
`;