强类型的typescript:

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

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

    Object.assign(element.style, newStyle);

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

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

我只是无意中来到这里，我不明白为什么需要这么多代码来实现这一点。

使用字符串插值添加CSS代码。

Let styles = ' 字体大小:15他们; 颜色:红色; 变换:旋转(20度) document.querySelector(“*”)。样式=样式 一个

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

使用ES6+，你也可以使用反引号，甚至直接从某个地方复制css:

const $div = document.createElement('div') 美元的div。innerText = 'HELLO' div.style美元。cssText = ' Background-color: rgb(26, 188, 156); 宽度:100 px; 高度:30 px; border - radius: 7 px; text-align:中心; padding-top: 10 px; 粗细:大胆的; ｀ document.body.append (div)美元

在对象中使用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> .

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

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)