如何在JavaScript中设置多个CSS样式？

使用纯JavaScript时，您无法同时设置所有样式； 您需要为每个样式使用单行。

但是，您不必一遍又一遍地重复使用document.getElementById(...).style.代码; 创建一个对象变量来引用它，您的代码将更加易读：

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

...等等。比您的示例更易读（而且说实话，与jQuery替代方案一样容易阅读）。

（如果Javascript被正确设计，您还可以使用with关键字，但最好不要用它，因为它可能会引起一些严重的命名空间问题）

由于字符串支持添加，您可以在不覆盖当前样式的情况下轻松添加新样式:

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

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

请参见for ... in。
示例：

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

不要认为这是可能的。

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

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

您最好的选择可能是创建一个函数，自己设置样式：

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）。

在样式对象的Object.entries中使用CSSStyleDeclaration.setProperty()方法。我们还可以通过此方法为CSS属性设置优先级（“important”）。我们将使用“连字符-”CSS属性名称。

有些情况下，使用CSS和JavaScript一起解决问题可能更加合理。请看以下代码：

document.getElementById("myElement").classList.add("newStyle");
document.getElementById("myElement").classList.remove("newStyle");

这只是简单地在CSS类之间切换，解决了许多与覆盖样式相关的问题。它甚至可以使您的代码更整洁。

这是一个老问题，但我认为对于不想覆盖先前声明的样式的任何人来说，使用函数可能是值得的。下面的函数仍然使用Object.assign来正确地修复样式。这是我所做的。

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.assign。例如：

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）之前，请确保已经加载。

我认为这是一种非常简单的方法，适用于以上所有解决方案：

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