我正在尝试制作一个带有预览功能的实时页面内 css 编辑器，该功能将重新加载样式表并应用它而无需重新加载页面。解决这个问题的最佳方法是什么？
有没有一种简单的方法可以在不重新加载页面的情况下重新加载 css？
IT技术
javascript
css
stylesheet
reload
2021-02-01 21:41:28
6个回答
可能不适用于您的情况，但这是我用于重新加载外部样式表的 jQuery 函数：
/**
* Forces a reload of all stylesheets by appending a unique query string
* to each stylesheet URL.
*/
function reloadStylesheets() {
var queryString = '?reload=' + new Date().getTime();
$('link[rel="stylesheet"]').each(function () {
this.href = this.href.replace(/\?.*|$/, queryString);
});
}
在“编辑”页面上，不要以正常方式（使用<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 上的 keydown，尽管你可能会得到一些不需要的副作用（页面会在你输入时不断变化）
编辑：经过测试并有效（至少在 Firefox 3.5 中，但在其他浏览器中应该没问题）。在此处查看演示：http : //jsbin.com/owapi
绝对没有必要为此使用 jQuery。以下 JavaScript 函数将重新加载所有 CSS 文件：
function reloadCss()
{
var links = document.getElementsByTagName("link");
for (var cl in links)
{
var link = links[cl];
if (link.rel === "stylesheet")
link.href += "";
}
}
查看 Andrew Davey 时髦的 Vogue 项目 - http://aboutcode.net/vogue/
Vanilla JS 中的一个较短版本，并在一行中：
for (var link of document.querySelectorAll("link[rel=stylesheet]")) link.href = link.href.replace(/\?.*|$/, "?" + Date.now())
或扩展：
for (var link of document.querySelectorAll("link[rel=stylesheet]")) {
link.href = link.href.replace(/\?.*|$/, "?" + Date.now())
}