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

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

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

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

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

@Mircea:在一条语句中为一个元素设置多种样式非常容易。 它不会影响现有的属性，并避免了循环或插件的复杂性。

document.getElementById("demo").setAttribute(
   "style", "font-size: 100px; font-style: italic; color:#ff0000;");

注意:如果以后使用此方法添加或更改样式属性，之前使用'setAttribute'设置的属性将被擦除。

使用Object.assign:

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

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

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

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

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

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

创建一个函数来处理它，并将参数与你想要更改的样式传递给它。

function setStyle( objId, propertyObject )
{
 var elem = document.getElementById(objId);
 for (var property in propertyObject)
    elem.style[property] = propertyObject[property];
}

像这样叫它

setStyle('myElement', {'fontsize':'12px', 'left':'200px'});

对于propertyObject内部的属性值，您可以使用变量。

这是一个旧线程，所以我认为对于任何寻找现代答案的人来说，我建议使用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);