我认为这是一种非常简单的解决上述所有问题的方法:

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

不要认为这是可能的。

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

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

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

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

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

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

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

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

最好的办法是创建一个函数来自己设置样式:

var setStyle = function(p_elem, p_styles)
{
    var s;
    for (s in p_styles)
    {
        p_elem.style[s] = p_styles[s];
    }
}

setStyle(myDiv, {'color': '#F00', 'backgroundColor': '#000'});
setStyle(myDiv, {'color': mycolorvar, 'backgroundColor': mybgvar});

请注意，您仍然必须使用javascript兼容的属性名称(因此使用backgroundColor)

我们可以在Node原型中添加styles函数:

Node.prototype.styles=function(obj){ for (var k in obj)    this.style[k] = obj[k];}

然后，在任意节点上调用styles方法:

elem.styles({display:'block', zIndex:10, transitionDuration:'1s', left:0});

它将保留任何其他现有的样式，并覆盖对象参数中的值。