Question

我目前正在为Steam上的一些流行软件构建一个Web应用程序，并决定使用JS生成元素。这样做的原因是因为我将在用户确认设置菜单后强制刷新，然后检查每个可自定义元素上的 localStorage 并采取相应的措施。

问题在于，与仅在标准CSS中使用类相比，在呈现HTML元素时我分别对它们进行样式设置。我到处寻找一种潜在的解决方案，我唯一能找到的解决方案是在css文件中定义该类，然后通过js应用该类，但这样会导致很多浪费的类。

for(let i=0; i<title.length; i++) {
    // creation
    const a = document.createElement("a");

    // styling
    a.style.display = "block";
    a.style.width = "90%";
    a.style.margin = "auto";
    a.style.padding = "20px";
    a.style.backgroundColor = "#2f2f2f";

    // attaching it to element as child
    sets.appendChild(a);
}

目前这是我创建所有元素的方式，这不理想。我想知道是否有可能从js中创建一个css类，或者至少是达到最终结果的最佳方法。在当前阶段这可能不是问题，但是在不久的将来，我可能会拥有成百上千个具有相同样式的元素。

**感谢您的提前帮助。

Answer 1

使用setAttribute

a.setAttribute('class', 'my-css-class');

然后可以使用CSS添加样式：

.my-css-class {
    background-color: #2f2f2f;
}

Answer 2

就纯效率而言，除了生成HTML字符串并使用innerHTML之外，我认为您没有比这做得更好的方法了，但我不会这样做，因为它可以节省几毫秒的时间，但是它使代码从长远来看，难以维护。如@fcalderan所建议，该片段已经是更好的选择。您还可以使用@Sirence指向的CSS类。另外，如果您关心代码样式，那么会损失一些性能，但会增加可读性，因此可以使用forEach()而不是经典的for循环。

CSS：

.set-title {
    display: block;
    width: 90%;
    margin: auto;
    padding: 20px;
    backgroun-color: #2f2f2f;
}

JS：

let fragment = new DocumentFragment();
title.forEach(t => {
    const a = document.createElement("a");
    a.className = 'set-title';
    fragment.appendChild(a);
});
sets.appendChild(fragment);

用JS生成多个html元素时，最有效的样式样式是什么？

2 个答案:

CSS：

JS：