下面的innerHtml是否有效

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

强类型的typescript:

对象。Assign方法很好，但是使用typescript你可以像这样自动完成:

    const newStyle: Partial<CSSStyleDeclaration> =
    { 
        placeSelf: 'centered centered',
        margin: '2em',
        border: '2px solid hotpink'
    };

    Object.assign(element.style, newStyle);

注意属性名是驼峰形的，没有破折号。

这甚至会告诉你它们何时被弃用。

JavaScript库允许您非常轻松地完成这些工作

jQuery

$('#myElement').css({
  font-size: '12px',
  left: '200px',
  top: '100px'
});

对象和for-in循环

或者，一个更优雅的方法是一个基本对象& for循环

var el = document.getElementById('#myElement'),
    css = {
      font-size: '12px',
      left: '200px',
      top: '100px'
    };  

for(i in css){
   el.style[i] = css[i];
}

我们可以在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});

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

在对象中使用CSSStyleDeclaration.setProperty()方法。样式对象的条目。 我们也可以用这个来设置CSS属性的优先级(“重要”)。 我们将使用“连字符”的CSS属性名。

Const styles = { “字体大小”:“18 px”, “粗细”:“大胆”, “背景颜色”:“lightgrey”, 颜色:“红”, "padding": "10px !important"， 保证金:“20 px”, 宽度:“100px !重要”， 边框:1px纯蓝色 }; const elem = document.getElementById("my_div"); Object.entries(风格)。forEach(([prop, val]) => { Const [value, pri = ""] = val.split("!"); elem.style。setProperty(prop, value, pri); })； <div id="my_div"> Hello </div> .

这是一个老问题，但我认为对于那些不想覆盖先前声明的样式的人来说，使用一个函数可能是值得的。下面的函数仍然使用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)已经加载。