JavaScript：動態（動態）創建樣式元素的優缺點

Question

在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示例：

迭代
即時CSS

這是我在這里找到的使用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中同樣快地執行。 但是，我只考慮不包含北斗七星子元素且嵌套ul元素相對較多的表，在其中遍歷以便選擇元素可能很困難。

重要提示：我僅在此處提供表格示例，以澄清與無關緊要時遇到的問題類型，可以隨意編輯問題並刪除此部分。 另外，請在問題范圍內清楚說明您的答案。 在這里，我不是在問“我實施得好嗎？” 我想問一下，動態創建樣式元素在瀏覽器內部機制方面有什么優點或缺點。

PS和示例：為什么我想到這個主意？ 我最近回答“ 如何在很長的html表中隱藏列 ”問題。 在這個問題中，OP詢問有關對長表中的某些表列應用CSS規則的問題。 我建議創建帶有規則的樣式元素，並且效果很好。 我認為這是因為樣式是由瀏覽器的內部機制應用的，並且比迭代遍歷元素並將樣式應用於每個項目提供了更好的性能。

Answer 1

除了一些范圍界定問題（頁面上可能有更多表格...）之外，這種方法也沒有本質上的錯誤-DOM中的style元素可以按您認為合適的方式進行編輯，瀏覽器遵循標准它。在您的測試用例中，實際上沒有一種有效的其他方法，因為colgroup確實提供了極為混亂的支持colgroup有78個關於該主題的重復錯誤，並且Mozilla自1998年第一個相關的錯誤報告以來一直拒絕正確實施它。

更快的原因只是開銷之一-一旦組裝了完整的DOM，相對較小的樣式表就可以以比Java解釋器遍歷所有行和單元格更快的速度在本機C ++中應用。 這是因為從歷史上講，CSS規則是反向應用的，並且瀏覽器將字典保留在內部，從而可以查找所有td元素。 本機C ++將始終擊敗更復雜的基於解釋器的代碼。

將來，范圍問題也可以通過作用域樣式解決（當前僅在FF中使用，這很典型），您將像這樣進行編碼：

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

scoped屬性使所包含的樣式僅對其所包含的元素 （在這種情況下為table以及所有其所包含的元素有效。 並且由於您可以通過ID訪問它，因此內容很容易替換/重構。

盡管這比您的方法更好，但最好的解決方法是，只要沒有通用的瀏覽器支持，在head創建style元素。

Answer 2

動態生成CSS是不好的 。 不要這樣

通過生成動態CSS起作用的解決方案可以轉換為不需要動態CSS的解決方案。

如果您需要一個示例，請在這里查看我的答案： jQuery更新實際CSS

要直接對您鏈接的案例做出回應：

對我來說，這似乎是一個非常奇怪的用例。 具有1000行表的頁面的起始位置已經不好。 您無法合理地在屏幕上容納1000行，並且期望進行任何有用的交互。 CSS不是這里的問題。 如果表較小，則性能問題會消失。

除了OP所建議的以外，可能還有其他方法。 您不需要（動態地）向每個單元格添加類，您可以在生成時將類放在那里，例如：

<table class="no-filter">
...
  <td class="filter1 filter2"></td>
...
</table>

然后有類似的東西：

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

您只需更改表上的類以說明適用哪個過濾器。

CSS不只是錘子，它還是一個非常精致且功能強大的工具的完整工具集。 確保使用正確的。

擁有靜態CSS的優勢應該是顯而易見的：

更容易理解，測試，調試和維護。
CSS實際上是CSS（而不是JavaScript）。
您可以做模板，也可以添加一些視覺回歸測試。

還存在一些性能問題。 我可以看到瀏覽器供應商優化了AGAINST動態CSS。 我的意思是，如果對靜態CSS進行了優化，從而降低了動態CSS的性能，那么您可能會做出權衡。

Answer 3

有一個名為less.js的庫，它使您可以使用.css文件中的變量來處理css，這是一個非常好的庫，您可能需要研究一下。 http://www.lesscss.org/

JavaScript：動態（動態）創建樣式元素的優缺點

問題描述

3 個解決方案

解決方案1
4 2014-01-08 01:51:54

解決方案2
4 2014-01-08 02:22:01

解決方案3
-1 2014-01-24 19:27:43

JavaScript：動態（動態）創建樣式元素的優缺點

問題描述

3 個解決方案

解決方案1 4 2014-01-08 01:51:54

解決方案2 4 2014-01-08 02:22:01

解決方案3 -1 2014-01-24 19:27:43

解決方案1
4 2014-01-08 01:51:54

解決方案2
4 2014-01-08 02:22:01

解決方案3
-1 2014-01-24 19:27:43