將動態CSS注入文檔？

將動態CSS代碼注入文檔的最佳方式是什麼，以便可以在運行時預覽所做的更改？將動態CSS注入文檔？

我有一個HTML頁面中的文本區域中，我將鍵入的CSS代碼。我想從文本區域更新頁面的樣式。這是我使用的當前方法。

<!DOCTYPE html> 
<html> 
<head> 
    <title>Dynamic CSS Experiments</title> 
    <meta charset=utf-8 /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> 
    <style id="dynamic-css" type="text/css"></style> 
    <!--[if IE]> 
     <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script> 
     jQuery(function ($) { 
      var styleTag, textArea; 
      styleTag = $("#dynamic-css"); 
      textArea = $("#css-ta"); 
      textArea.on('keydown', function() { 
       styleTag.html(textArea.val()) 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <textarea name="css" id="css-ta" cols="30" rows="10"></textarea> 
    ... 
</body> 
</html>

這是最好的方法嗎？還有其他的智能方法嗎？

來源

2013-05-11 Muhammed K K

你在做什麼是完美的，也是一種常見的方法。 – 2013-05-11 17:35:11

感謝@dda的編輯。 – 2013-05-11 17:52:07

嘗試一些像這樣的事情來限制更新的數目。

<!DOCTYPE html> 
<html> 
<head> 
    <title>Dynamic CSS Experiments</title> 
    <meta charset=utf-8/> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> 
    <style id="dynamic-css" type="text/css"></style> 
    <!--[if IE]> 
     <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script> 
     jQuery(function ($) { 
      var styleTag, textArea, active=true, threashold=100; 
      styleTag = $("#dynamic-css"); 
      textArea = $("#css-ta"); 
      textArea.on('keydown', function() { 
       if (active===true) { 
        active = false; 
        setTimeout(function(){ 
         styleTag.html(textArea.val()); 
         active = true; 
        }, threashold); 
       } 
      }); 
     }); 
    </script> 
</head> 
<body> 
<textarea name="css" id="css-ta" cols="30" rows="10"></textarea> 
... 
</body> 
</html>

來源

2013-05-11 17:44:17 Mammu

Mamu ............ – Spynet 2013-11-11 08:41:06

我認爲「最好」的方法是每一種情況下是唯一的。

根據你的腳本，它可能是有用的節流添加到keydown事件，這樣你就可以減少您的樣式更新的數量並提高性能。

見$ .throttle或$ .debounce https://code.google.com/p/jquery-debounce/ - 例如實施

來源

2013-05-11 17:37:52 lexicus

當更新較大的css文件時是否有任何性能問題？ – 2013-05-11 17:39:13

jQuery沒有內置油門（至少內置），你是否將jQuery與下劃線混合？ – 2013-05-11 17:39:28

Muhammed K K，當您將新樣式應用於文檔時，將會觸發重排事件。更多的CSS更新 - 更多的迴流。 – lexicus 2013-05-11 17:45:24

的同時，考慮jQuery的功能：以動態地應用CSS樣式.addClass()和.removeClass()。

來源

2013-05-11 17:40:10

。這裏的課程將被覆蓋。 – 2013-05-11 17:42:15

更改進的版本會是這樣的：

jQuery(function ($) { 
     var styleTag, textArea; 
     var kI; 
     styleTag = $("#dynamic-css"); 
     textArea = $("#css-ta"); 
     textArea.on('keyup', function() { 
      if (kI !== undefined) { 
       clearTimeout(kI); 
      } 
      kI = setTimeout(function() { 
       styleTag.html(textArea.val()); 
      },1000); 
     }); 
    });

這就對keyup事件超時（KEYUP發生的keydown後，防止重複有人一直按住一個鍵），火災後的1秒事件已經發生。每次事件發生時，倒計時都會重置。如果倒數計時結束，您的CSS更新。

這就避免了風格塊的內容太多重寫。

來源

2013-05-11 17:41:15

將動態CSS注入文檔？

回答

相關問題