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

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

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

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

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

不要认为这是可能的。

但是你可以用样式定义创建一个对象，然后循环遍历它们。

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);

在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");

如果你的CSS值为字符串，并且没有为元素设置其他CSS(或者你不关心覆盖)，请使用cssText属性:

document.getElementById("myElement").style.cssText = "display: block; position: absolute";

你也可以使用模板文字来获得更简单、更可读的多行css语法:

document.getElementById("myElement").style.cssText = `
  display: block; 
  position: absolute;
`;

这在某种意义上是好的，因为它避免了每次更改属性时重新绘制元素(以某种方式“一次性”更改所有属性)。

另一方面，你必须先构建字符串。

实现这一目标的不同方法:

1. document.getElementById("ID").style.cssText = "display:block; position:relative; font-size:50px";
2. var styles = {"display":"block"; "position":"relative"; "font-size":"50px"};
 
   var obj = document.getElementById("ID");
   Object.assign(obj.style, styles);

3. var obj = document.getElementById("ID");
obj.setAttribute("style", "display:block; position:relative; font-size:50px");

希望这对RDaksh有帮助

<button onclick="hello()">Click!</button>

<p id="demo" style="background: black; color: aliceblue;">
  hello!!!
</p>

<script>
  function hello()
  {
    (document.getElementById("demo").style.cssText =
      "font-size: 40px; background: #f00; text-align: center;")
  }
</script>