JavaScript：动态（动态）创建样式元素的优点和缺点

在JavaScript中，我们可以动态创建元素并附加到部分，以便为大量元素应用CSS规则。

1. 这种方法的优点和缺点是什么？

2. 如果与javascript迭代相比，它确实提供了性能提升。 幕后的内容（浏览器内部）？

3. 哪一个更快或更慢？ Javascript迭代元素或在浏览器中动态添加CSS？

4. 处理时间怎么样？ 处理负荷？

为了更好地理解我使用此方法的问题，请参阅以下示例：

示例：如果我的表包含20个或更多列以及1000行或更多，如下所示：

  //Other table data  //Other table data  //Other rows  //Other table data  //Other rows  //Other table data  //Other rows 
 
 
 
Id
 
Name
 
Family Name
 
SSN
 
 
 
 
1
 
Nick
 
Jackson
 
123456
 
809
 
Helga
 
Jhonson
 
125648
 
1001
 
Nick
 
Jhonson
 
216458
  

如果有人需要jsFiddle示例，我可以稍后创建一个。

情况1：如果我想动态隐藏只包含SSN数据的表列。 我可以应用几种方法来做到这一点。 这种方法可分为两大类。 在第一类解决方案中，我可以迭代td元素并动态更改列的样式。 在第二种方法中，我可以通过动态创建一个使用预定义的CSS规则来应用CSS，如@Frits van Campen所述 。 （ 注意： @Frits van Campen对于给定的案例是很好的解决方案。但是我想进一步讨论，然后操纵表格行显示和隐藏。）

我可以创建动态CSS规则如下：

 td:nth-child(3) { display:none; } 

或者应用预定义的CSS规则：

 table.no-filter td.column3 { display:block; } table.filter3 td.column3 { display: none; } 

以下是jsFiddly示例：

1. 迭代
2. CSS飞行

这是使用我在这里找到的console.time方法的时间比较。

左边是动态css，右边是迭代方法。

也许，这是不合适的，因为它计算追加样式元素与迭代元素。 动态CSS中元素的所有迭代都将由浏览器内部完成。 但是，如果我们认为我们的脚本响应时间动态css更快。 注意 ：与jQuery相比，纯JavaScript中的迭代方法会更快。 但是我没有结果多快。 所以你可以更多地回答你的问题。

案例2：现在，我想强调表格行

，其中包含名为“Nick”的用户。 在这里你可以注意到表行有数据属性，如name，family_name，id等。所以，这里我可以再次使用javascript或任何其他库工具迭代元素或者可以应用一些动态规则（我不知道是否可能或者不应用预定义的filter，如1）

CSS规则：

 tr[data-name ~='nick'] { background-color:red; } 

在这种情况下，我可以通过动态应用CSS规则进行很多有趣的过滤。

更新：此处给出的示例仅用于简单概述问题。 并且一些优化的迭代可以在javascript中同样快速地执行。 但是我认为只有没有北斗儿童元素的表比较嵌套的ul元素，其中遍历以便选择元素可能是困难的。

重要提示：我这里只给出一些表格，以便澄清我遇到的问题，如果不相关，可随意编辑问题并删除此部分。 另外，请在问题范围内明确说明您的答案。 在这里，我不是在询问“我是否以良好的方式实施了？” 我想知道动态创建样式元素在浏览器内部机制方面有什么优点或缺点。

PS和例子：为什么我有这个想法？ 我最近回答’ 如何在很长的html表中隐藏列 ‘问题。 在这个问题中，OP询问是否对长表中的某些表列应用CSS规则。 我建议在飞行中创建带有规则的样式元素，它工作正常。 我认为这是因为浏览器内部机制应用了样式，并且比迭代元素和将样式应用于每个项目提供了更好的性能。

Answer 1

除了一些范围问题（页面上可能有更多表格……）这种方法没有任何内在错误 – DOM中的style元素可以根据您的需要进行编辑，浏览器遵循标准遵循标准它。 在你的测试用例中，实际上并没有一个有效的其他方法，因为colgroup支持非常混乱 – 在Bugzilla中有78个重复的bug，而且自从1998年第一个相关的bug报告以来，Mozilla一直拒绝正确实现它。

它更快的原因只是开销之一 – 一旦组装完整的DOM，可以在本机C ++中应用相对较小的样式表，这比Javascript解释器可以遍历所有行和单元格要快得多。 这是因为历史上CSS规则反向应用，浏览器快速保存字典，允许它查找所有td元素。 Native C ++将始终击败更复杂的基于解释器的代码。

在将来，范围问题也可以通过范围样式解决（目前仅在FF中，而非典型），您将编码如下：

  ... 
  
  

scoped属性使包含的样式仅对其包含元素有效，在本例中为table ，当然还包含其所有包含的元素。 由于您可以通过ID访问它，因此内容很容易被替换/重建。

虽然这比你的方法更好，但只要没有通用浏览器支持这种创建style元素的head是最好的解决方法。

Answer 2

动态生成CSS很糟糕 。 不要这样做。

通过生成动态CSS工作的解决方案可以转换为不需要动态CSS的解决方案。

如果你需要一个例子，请在这里看到我的答案： jQuery来更新实际的CSS

---

要直接回复您关联的案例：

这对我来说似乎是一个非常奇怪的用例。 具有1000行表的页面已经是一个糟糕的起始位置。 您无法在屏幕上合理地容纳1000行，并期望进行任何有用的交互。 CSS不是问题所在。 如果表格较小，性能问题就会消失。

可能还有其他方法，而不是OP建议的方法。 您不需要（动态地）为每个单元格添加一个类，您可以将该类放在生成时间，例如：

  ...  ...  

然后有类似的东西：

 table.filter1 td.filter2 { display: none; } table.filter2 td.filter1 { display: none; } 

您只需更改表上的类以说明应用哪个filter。

CSS不仅仅是一把锤子，它是一套非常精致且function强大的工具。 确保使用正确的。

---

拥有静态CSS的优点应该是显而易见的：

• 更容易理解，测试，调试和维护。
• CSS实际上是CSS（不是JavaScript）。
• 你可以做模板，也许可以添加一些视觉回归测试。

还有一些性能问题。 我可以看到浏览器厂商优化了AGAINST动态CSS。 我的意思是，如果静态CSS的优化会降低动态CSS的性能，那么你可能会做出这种权衡。

Answer 3

有一个名为less.js的库，它允许你在你的.css文件中使用变量来操作css。这是一个非常好的库，你可能想看看它。 http://www.lesscss.org/