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

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)

不要认为这是可能的。

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

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

您可以编写一个函数，将声明单独设置，以免覆盖您没有提供的任何现有声明。假设你有这个对象参数声明列表:

const myStyles = {
  'background-color': 'magenta',
  'border': '10px dotted cyan',
  'border-radius': '5px',
  'box-sizing': 'border-box',
  'color': 'yellow',
  'display': 'inline-block',
  'font-family': 'monospace',
  'font-size': '20px',
  'margin': '1em',
  'padding': '1em'
};

你可以写一个这样的函数:

function applyStyles (el, styles) {
  for (const prop in styles) {
    el.style.setProperty(prop, styles[prop]);
  }
};

它接受一个元素和一个样式声明的对象属性列表，以应用于该对象。下面是一个用法示例:

const p = document.createElement('p');
p.textContent = 'This is a paragraph.';
document.body.appendChild(p);

applyStyles(p, myStyles);
applyStyles(document.body, {'background-color': 'grey'});

// styles to apply const myStyles = { 'background-color': 'magenta', 'border': '10px dotted cyan', 'border-radius': '5px', 'box-sizing': 'border-box', 'color': 'yellow', 'display': 'inline-block', 'font-family': 'monospace', 'font-size': '20px', 'margin': '1em', 'padding': '1em' }; function applyStyles (el, styles) { for (const prop in styles) { el.style.setProperty(prop, styles[prop]); } }; // create example paragraph and append it to the page body const p = document.createElement('p'); p.textContent = 'This is a paragraph.'; document.body.appendChild(p); // when the paragraph is clicked, call the function, providing the // paragraph and myStyles object as arguments p.onclick = (ev) => { applyStyles(p, myStyles); } // this time, target the page body and supply an object literal applyStyles(document.body, {'background-color': 'grey'});

下面的innerHtml是否有效

var styleElement = win.document.createElement("STYLE"); styleElement。innerHTML = "#notEditableVatDisplay {display:inline-flex} #editableVatInput，.print-section, i.a a.fa-sort. "点击排序{显示:none !重要}";

在某些情况下，使用CSS和javascript可能对解决这类问题更有意义。看看下面的代码:

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

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

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