是否有一种简单的方法可以在不重新加载页面的情况下重新加载CSS？

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在尝试使用预览功能制作一个活页内CSS编辑器，该功能将重新加载样式表并应用它，而无需重新加载页面。最好的方法是什么？

回答：

在“编辑”页面上，不要以常规方式（带有<link>标签）包括CSS，而是将其全部写入<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上，尽管您可能会得到一些不良的副作用（键入时页面会不断变化）

以上是 是否有一种简单的方法可以在不重新加载页面的情况下重新加载CSS？ 的全部内容， 来源链接： utcz.com/qa/404875.html

回到顶部