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

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

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

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

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

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

var styles = {
    "background-color": "lightgray",
    "width": "500px",
    "height": "300px"
};

/

var obj = document.getElementById("container");
Object.assign(obj.style, styles);

我只是无意中来到这里，我不明白为什么需要这么多代码来实现这一点。

使用字符串插值添加CSS代码。

Let styles = ' 字体大小:15他们; 颜色:红色; 变换:旋转(20度) document.querySelector(“*”)。样式=样式 一个

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

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

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

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

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

这是一个旧线程，所以我认为对于任何寻找现代答案的人来说，我建议使用Object.keys();

var myDiv = document.getElementById("myDiv");
var css = {
    "font-size": "14px",
    "color": "#447",
    "font-family": "Arial",
    "text-decoration": "underline"
};

function applyInlineStyles(obj) {
    var result = "";
    Object.keys(obj).forEach(function (prop) {
        result += prop + ": " + obj[prop] + "; ";
    });
    return result;
}

myDiv.style = applyInlineStyles(css);

参见…在

例子:

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];
}