JavaScript:动态(动态)创建样式元素的优缺点

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

这种方法的优点或缺点是什么？

如果它确实提供了与元素上的 javascript 迭代相比的性能提升。幕后(浏览器内部)是什么？

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

处理时间呢？处理负荷？

为了更好地理解我使用这种方法的问题，请参见以下示例:

示例: 如果我的表格有 20 列或更多列和 1000 行或更多行，如下所示:

<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 元素并动态更改列的样式。在 第二种方法 中，我可以通过动态创建一个来应用 CSS，或者使用 here 给定的预定义 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 示例:

@Frits van Campen

Iteration

这是使用 console.time 方法的时间比较，我发现 CSS on fly 。
enter image description here

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

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

案例 2: 现在，我想突出显示包含名为“Nick”的用户的表行 <tr>。在这里您可以注意到表行具有名称、family_name、id 等数据属性。因此，在这里我可以再次使用 javascript 或任何其他库工具迭代元素，或者可以应用一些动态规则(我不知道是否可能或不应用预定义的过滤器，如情况 1。)

CSS规则:

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

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

更新:此处给出的示例是对问题的简单概述。一些优化的迭代可以在 javascript 中同样快速地执行。但是，我只考虑没有斗子子元素的表相对嵌套的 ul 元素，其中遍历以选择元素可能很困难。

重要提示: 我在这里只给出表格示例，以澄清我面临的问题是什么，如果无关紧要，请随时编辑问题并删除这部分。还请在问题范围内清楚地说明您的答案。在这里，我不是在问“我是否以良好的方式实现？”我问动态创建样式元素在浏览器内部机制方面有什么优点或缺点。

附注和示例: 为什么我有这个想法？我最近回答了“here ”问题。在这个问题中，OP 询问如何对长表中的某些表列应用 CSS 规则。我建议使用动态规则创建样式元素，并且效果很好。我认为这是因为样式由浏览器内部机制应用，并且比遍历元素并将样式应用于每个元素提供了更好的性能。

最佳答案

除了一些范围界定问题(页面上可能有更多表格...)，这种方法本身没有任何问题 - style元素在 DOM 中可以按照您认为合适的方式进行编辑，浏览器通过尊重它来遵循标准。在您的测试用例中，确实没有真正有效的其他方法，因为 colgroup支持极其困惑——Bugzilla 中有 78 个关于该主题的重复错误，自 the first related bug report in 1998 以来 Mozilla 一直拒绝正确实现它.

它更快的原因只是开销之一——一旦组装了完整的 DOM，一个相对较小的样式表就可以在原生 C++ 中应用，比 Javascript 解释器在所有行和单元格上循环的速度要快得多。这是因为历史上 CSS 规则是反向应用的，浏览器在内部保存了一个字典，可以快速找到所有 td元素。 native C++ 总是胜过更复杂的基于解释器的代码。

将来，作用域问题也可以通过 scoped styles 解决。 (目前仅在 FF 中，相当典型)，你会这样编码:

<table>
  <style id="myTableStyle" scoped>
    td:nth-child(1) { display:none }
  </style>
  <tbody>
     ...
  </tbody>
</table>

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

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

关于JavaScript:动态(动态)创建样式元素的优缺点，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20985465/

JavaScript:动态(动态)创建样式元素的优缺点

上一篇：javascript - 比较包含对象的两个数组

下一篇：javascript - 为什么我不能将 JavaScript 函数命名为 `all` ？