在 JavaScript 中，我们可以<style>动态创建元素并附加到<head>部分，以便将 CSS 规则应用于大量元素。
这种方法的优点或缺点是什么？
如果与元素上的 javascript 迭代相比，它确实可以提高性能。幕后（浏览器内部）发生了什么？
哪个更快或更慢？Javascript迭代元素或在浏览器中动态添加css？
处理时间呢？处理负载？
为了更好地理解我使用这种方法的问题，请参见以下示例：
示例：如果我有 20 列或更多列和 1000 行或更多行的表，如下 html：
<table border="1" class='no-filter'>
<thead>
<tr>
<th data-title='id'>Id</th>
<th data-title='name'>Name</th>
<th data-title='family_name'>Family Name</th>
<th data-title='ssn'>SSN</th>
//Other table data
</tr>
</thead>
<tbody>
<tr data-id='1' data-name='nick' data-famil_name='jackson' data-ssn='123456'>
<td class="column column1">1</td>
<td class="column column2">Nick</td>
<td class="column column3">Jackson</td>
<td class="column column4">123456</td>
//Other table data
</tr>
//Other rows
<tr data-id='809' data-name='helga' data-famil_name='jhonson' data-ssn='125648'>
<td class="column column1">809</td>
<td class="column column2">Helga</td>
<td class="column column3">Jhonson</td>
<td class="column column4">125648</td>
//Other table data
</tr>
//Other rows
<tr data-id='1001' data-name='nick' data-famil_name='jhonson' data-ssn='216458'>
<td class="column column1">1001</td>
<td class="column column2">Nick</td>
<td class="column column3">Jhonson</td>
<td class="column column4">216458</td>
//Other table data
</tr>
//Other rows
</tbody>
</table>
如果有人需要 jsFiddle 示例，我可以稍后创建一个。
案例 1：如果我只想动态隐藏包含 SSN 数据的表列。我可以应用几种方法来做到这一点。这种方法可以分为两大类。在 第一类解决方案中，我可以迭代td元素并动态更改列的样式。在第二种方法中，我可以通过动态创建一个或使用@Frits van Campen在此处给出的预定义 CSS 规则来应用 CSS 。（注意：@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 示例：
这是我在这里找到的使用 console.time 方法的时间比较。
左边是动态css，右边是迭代方法。
也许，这是不合适的，因为它计算附加样式元素与迭代元素。动态 CSS 中元素的所有迭代都将由浏览器内部完成。但是，如果我们认为我们的脚本响应时间动态 css 更快。注意：与 jQuery 相比，纯 JavaScript 中的迭代方法会更快。但是我没有结果有多快。所以你可以在你的答案更多。
案例 2：现在，我想突出显示<tr>包含名为“Nick”的用户的表行。在这里您可以注意到表格行具有名称、family_name、id 等数据属性。因此，在这里我可以再次使用 javascript 或任何其他库工具迭代元素，或者可以应用一些动态规则（我不知道是否可以或不应用预定义的过滤器，如案例 1。）
CSS 规则：
tr[data-name ~='nick']
{
background-color:red;
}
在这种情况下，我可以通过动态应用 CSS 规则来做很多有趣的过滤。
更新：此处给出的示例是对问题的简单概述。一些优化的迭代可以在 javascript 中同样快速地执行。但是，我只考虑没有 dipper 子元素的表相对嵌套的 ul 元素，其中遍历以选择元素可能很困难。
重要提示：我在这里仅给出表格示例，以澄清我遇到的问题，如果无关紧要，请随时编辑问题并删除此部分。还请在问题范围内清楚地说明您的答案。在这里，我不是在问“我实施得好不好？” 我在问动态创建样式元素在浏览器内部机制方面有什么优点或缺点。
PS和例子：为什么我有这个想法？我最近回答了“如何在很长的 html 表格中隐藏列”的问题。在这个问题中，OP 询问有关对长表中的某些表列应用 CSS 规则的问题。我建议使用动态规则创建样式元素，并且效果很好。我认为这是因为样式由浏览器内部机制应用，并且比遍历元素并将样式应用于每个项目提供更好的性能。