通过js 快捷给元素设置多个css属性 -- cssText

cssText

js操作dom元素是很常见的操作。

有这么一个场景，对新创建的dom元素通过js设置多组css属性。

基操：

let element = document.createElement("div");
document.body.appendChild(heart).innerHTML = '我是新建元素的文案';
element.style.height = '100px';  // 设置元素高度
element.style['text-align'] = '100px'; // 设置元素行高
element.style.color = 'red'; // 设置文字颜色

如果只有一个css属性需要设置，上述操作肯定是很简单的，但是要是设置多个css属性的话，上述操作就显得很啰嗦。

该如何快捷简单的设置呢？

优雅的操作：

let element = document.createElement("div");
document.body.appendChild(heart).innerHTML = '我是新建元素的文案';
element.style.cssText = 'height: 100px; text-align: 100px; color: red';