JavaScript:动态(动态)创建样式元素的优点和缺点
Kha*_*lla 10 javascript css browser jquery dynamic-css
在JavaScript中,我们可以<style>动态创建元素并附加到<head>section以便为大量元素应用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元素并动态更改列的样式.在第二种方法我可以动态创建oneor使用给出预定义的CSS规则CSS 这里通过@Frits面包车坎彭.(注意: @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"的用户的表行.在这里你可以注意到表行有数据属性,如name,family_name,id等.所以,这里我可以再次使用javascript或任何其他库工具迭代元素或者可以应用一些动态规则(我不知道是否可能或者不应用预定义的过滤器,如1)
CSS规则:
tr[data-name ~='nick']
{
background-color:red;
}
在这种情况下,我可以通过动态应用CSS规则进行很多有趣的过滤.
更新:此处给出的示例仅用于简单概述问题.并且一些优化的迭代可以在javascript中同样快速地执行.但是我只考虑没有北斗儿子元素的表比较嵌套的ul元素,其中遍历以便选择元素可能是困难的.
重要提示:我这里只给出一些表格,以便澄清我遇到的问题,如果不相关,可以随意编辑问题并删除此部分.另外,请在问题范围内明确说明您的答案.在这里,我不是在问'我是否以良好的方式实施了？' 我想知道动态创建样式元素在浏览器内部机制方面有什么优点或缺点.
PS和例子:为什么我有这个想法？我最近回答' 如何在很长的html表中隐藏列 '的问题.在这个问题中,OP询问是否对长表中的某些表列应用CSS规则.我建议在飞行中创建带有规则的样式元素,它工作正常.我认为这是因为浏览器内部机制应用了样式,并且比迭代元素和将样式应用于每个项目提供了更好的性能.
除了一些范围问题（页面上可能有更多表格......）之外，这种方法没有任何本质上的错误 - 元素style位于 DOM 中，可以根据需要进行编辑，浏览器通过尊重它来遵循标准。在您的测试用例中，实际上并没有有效的其他方法，因为确实有极其混乱的支持 - Bugzilla 中有 78 个关于该主题的重复错误，并且自1998 年第一个相关错误报告colgroup以来，Mozilla 一直拒绝正确实现它。
它更快的原因只是开销之一 - 一旦组装了完整的 DOM，就可以在本机 C++ 中应用相对较小的样式表，这比 Javascript 解释器循环遍历所有行和单元格要快得多。这是因为历史上 CSS 规则是反向应用的，浏览器内部会快速保存一个字典，以便能够找到所有td元素。本机 C++ 总是会击败更复杂的基于解释器的代码。
将来，范围问题也可以通过范围样式来解决（目前仅在 FF 中，相当典型），您可以像这样编码：
<table>
<style id="myTableStyle" scoped>
td:nth-child(1) { display:none }
</style>
<tbody>
...
</tbody>
</table>
该scoped属性使包含的样式仅对其包含元素有效，table在本例中为 ，当然还对其包含的所有元素有效。由于您可以通过 ID 访问它，因此可以轻松替换/重建内容。
虽然这比您的方法更可取，但只要没有通用浏览器支持此创建style元素，就是head最好的解决方法。