javascript – 有没有重新加载css而不重新加载页面的简单方法?

我试图做一个实时,页内css编辑器与预览功能,将重新加载样式表,并应用它,而不需要重新加载页面。什么是最好的办法呢?
最佳答案
在“修改”页面上,而不是以常规方式(使用< link>标记)包含CSS,而是将其全部写入< style>标签。编辑它的innerHTML属性将自动更新页面,即使没有到服务器的往返。

<style type="text/css" id="styles">
    p {
        color: #f0f;
    }
</style>

<textarea id="editor"></textarea>
<button id="preview">Preview</button>

Javascript,使用jQuery:

jQuery(function($) {
    var $ed = $('#editor')
      , $style = $('#styles')
      , $button = $('#preview')
    ;
    $ed.val($style.html());
    $button.click(function() {
        $style.html($ed.val());
        return false;
    });
});

这应该是!

如果你想真的想,附加功能到textarea键下,虽然你可以得到一些不需要的副作用(页面将不断变化,你输入)

编辑:测试和工作(在Firefox 3.5,至少,虽然应该很好与其他浏览器)。见这里的演示:http://jsbin.com/owapi

转载注明原文:javascript – 有没有重新加载css而不重新加载页面的简单方法? - 代码日志