我正在尝试使用预览功能制作一个活页内CSS编辑器,该功能将重新加载样式表并应用它,而无需重新加载页面。最好的方法是什么?
在“编辑”页面上,不要以常规方式(带有<link>标签)包括CSS,而是将其全部写入<style>标签。编辑的innerHTML属性将自动更新页面,即使没有往返服务器的访问。
<link>
<style>
innerHTML
<style type="text/css" id="styles"> p { color: #f0f; } </style> <textarea id="editor"></textarea> <button id="preview">Preview</button>
使用jQuery的Javascript:
jQuery(function($) { var $ed = $('#editor') , $style = $('#styles') , $button = $('#preview') ; $ed.val($style.html()); $button.click(function() { $style.html($ed.val()); return false; }); });
就是这样!
如果您真的想花哨的话,请将功能附加到textarea的keydown上,尽管您可能会得到一些不良的副作用(键入时页面会不断变化)