JavaScript では、膨大な数の要素に CSS ルールを適用するために<style>、要素を動的に作成してセクションに追加できます。<head>
このアプローチの利点と欠点は何ですか?
要素に対するJavaScriptの反復と比較して、実際にパフォーマンスが向上する場合。舞台裏 (ブラウザの内部) は何ですか?
速いのと遅いのはどっち？要素に対するJavascriptの反復またはブラウザで動的にcssを追加しますか?
処理時間はどうですか？処理負荷？
このアプローチを使用した問題をよりよく理解するには、次の例を参照してください。
例:次の html のように、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 データを含むテーブル列のみを動的に非表示にしたい場合。これを行うには、いくつかのアプローチを適用できます。このアプローチは、大きく 2 つのカテゴリに分けることができます。最初のカテゴリのソリューションでは 、td要素を繰り返し処理して、列のスタイルを動的に変更できます。2番目のアプローチでは、1 つを動的に作成して CSS を適用するか、ここで@Frits van Campenが指定した定義済みの 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' という名前のユーザーを含むテーブル行を強調表示したいと思います。ここで、表の行に name、family_name、id などのデータ属性があることに注意してください。したがって、ここでも、javascript やその他のライブラリ ツールを使用して要素を反復処理したり、何らかの動的ルールを適用したりできます (それが可能かどうかはわかりません)。または、ケース 1 のように定義済みのフィルターを適用しないでください。)
CSS ルール:
tr[data-name ~='nick']
{
background-color:red;
}
この場合、CSS ルールを動的に適用することで、多くの楽しいフィルタリングを行うことができます。
更新: ここに示す例は、問題の簡単な概要です。また、一部の最適化された反復は、javascript で同等に高速に実行できます。ただし、要素を選択するためのトラバースが難しい可能性がある比較的ネストされた ul 要素にディッパーの子要素がないテーブルのみを検討します。
重要:ここでは、質問を編集してこの部分を削除してください。また、質問の範囲内で回答を明確に記載してください。ここで私は「実装がうまくいったかどうか」について尋ねているのではありません。スタイル要素を動的に作成することの利点と欠点は、ブラウザの内部メカニズムに関してどのようなものかを尋ねています。
PS と例:なぜこのアイデアを思いついたのですか? 最近、「非常に長いhtmlテーブルで列を非表示にする方法」の質問に答えました。この質問では、OP は長いテーブルの特定のテーブル列に CSS ルールを適用することについて尋ねます。その場でルールを使用してスタイル要素を作成することをお勧めします。これは正常に機能します。これは、ブラウザの内部メカニズムによってスタイルが適用され、要素を繰り返し処理して各項目にスタイルを適用するよりもパフォーマンスが向上するためだと思います。