将动态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注入文档？

回答

相关问题