您可以在css文件中拥有单独的类，然后将类名分配给元素

或者你可以循环样式的属性为-

var css = { "font-size": "12px", "left": "200px", "top": "100px" };

for(var prop in css) {
  document.getElementById("myId").style[prop] = css[prop];
}

这是一个老问题，但我认为对于那些不想覆盖先前声明的样式的人来说，使用一个函数可能是值得的。下面的函数仍然使用Object。赋值以正确地固定样式。以下是我所做的

function cssFormat(cssText){

   let cssObj = cssText.split(";");
   let css = {};
   
   cssObj.forEach( style => {

       prop = style.split(":");

       if(prop.length == 2){
           css[prop[0]].trim() = prop[1].trim();
       } 

   }) 
   
  return css;
}

现在你可以这样做

let mycssText = "background-color:red; color:white;";
let element = document.querySelector("body");

Object.assign(element.style, cssFormat(mycssText));

您可以通过向函数中同时提供元素选择器和文本来简化这一点，这样就不必使用Object了。每次都要分配。例如

function cssFormat(selector, cssText){
  
   let cssObj = cssText.split(";");
   let css = {};
   
   cssObj.forEach( style => {

       prop = style.split(":");

       if(prop.length == 2){
           css[prop[0]].trim() = prop[1].trim();
       } 

   }) 

   element = document.querySelector(selector);
   
   Object.assign(element.style, css); // css, from previous code

} 

现在你可以做:

cssFormat('body', 'background-color: red; color:white;') ;

//or same as above (another sample) 
cssFormat('body', 'backgroundColor: red; color:white;') ; 

注意:在选择之前，请确保您的文档或目标元素(例如，body)已经加载。

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

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

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

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

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

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

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

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