Javascript 将动态CSS注入文档？
向文档中注入动态CSS代码以便在运行时预览所做的更改的最佳方法是什么 我在HTML页面中有一个文本区，我将在其中键入CSS代码。我想从文本区域更新页面的样式。这是我目前使用的方法Javascript 将动态CSS注入文档？,javascript,jquery,performance,Javascript,Jquery,Performance,向文档中注入动态CSS代码以便在运行时预览所做的更改的最佳方法是什么 我在HTML页面中有一个文本区，我将在其中键入CSS代码。我想从文本区域更新页面的样式。这是我目前使用的方法 <!DOCTYPE html> <html> <head> <title>Dynamic CSS Experiments</title> <meta charset=utf-8 /> <meta name="viewp
<!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>
动态CSS实验
jQuery（函数（$）{
var-styleTag，textArea；
styleTag=$（“#动态css”）；
textArea=$（“#css ta”）；
textArea.on（'keydown'，函数（）{
html（textArea.val（））
});
});
...
例如，在执行< < /P> > P>时，考虑jQuery函数：<代码> .Advase>（和代码> >和代码> .ReaveCeLasSe（）/代码>，以便动态地应用CSS样式。 < P>一个更改进的版本将是这样的：
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);
});
});
这样可以避免对样式块的内容进行过多的重写。尝试这样的方法来限制更新的次数
<!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>
动态CSS实验
jQuery（函数（$）{
var styleTag，textArea，active=true，threashold=100；
styleTag=$（“#动态css”）；
textArea=$（“#css ta”）；
textArea.on（'keydown'，函数（）{
如果（活动===真）{
主动=假；
setTimeout（函数（）{
html（textArea.val（））；
主动=真；
}，threashold）；
}
});
});
...