javascript - 如果需要用JS给元素设置大量CSS样式采用以下哪种方式在性能或者维护难度上较优秀？

Question

现在我需要使用JS动态的插入好几个元素并为他们设置CSS样式，那么为他们设置样式的时候是使用下面哪种方式更好呢：

1.

p.style.width = 500 + "px";
p.style.position = "absolute";
    ......
    

2.

var style = document.createElement("style");
style.type = "text/css";
style.appendChild(document.createTextNode("body{background:red}"));
var head = document.getElementsByTagName("head")[0];
head.appendChild(style);

以上两种方式哪种好呢？或者还有其他更好的方式？现在是在校学生没有工作实战经验，不知道实际公司项目中一般采用哪种方式，请大神们不吝赐教~

Answer 1

都不是最好，将 css 和 JavaScript 分离开最好

// 不好的写法
element.style.color = "red";

// 不好的写法
element.style.cssText = "color: red; left: 10px; top: 100px";

// 好的写法，原生方法
element.className += " reveal";

// 好的写法，HTML5
element.classList.add("reveal");

// 好的写法，jQuery
$(element).addClass("reveal");

参：https://github.com/hanzichi/r...

Answer 2

楼上正解使用class类名吧