我正在尝试使用预览功能制作一个实时的页内css编辑器，该功能可以重新加载样式表并应用它而无需重新加载页面。最好的方法是什么？
在“编辑”页面上，不是以正常方式包含CSS（使用<link>标记），而是将其全部写入<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
另一个答案：有一个名为ReCSS的书签。我没有广泛使用它，但似乎工作。
该页面上有一个书签，可以拖放到你的地址栏上（似乎无法在这里制作一个）。万一破了，这是代码：
javascript:void(function()%7Bvar%20i,a,s;a=document.getElementsByTagName('link');for(i=0;i%3Ca.length;i++)%7Bs=a[i];if(s.rel.toLowerCase().indexOf('stylesheet')%3E=0&&s.href)%20%7Bvar%20h=s.href.replace(/(&%7C%5C?)forceReload=%5Cd%20/,'');s.href=h%20(h.indexOf('?')%3E=0?'&':'?')%20'forceReload='%20(new%20Date().valueOf())%7D%7D%7D)();
以简单的方式，您可以使用rel =“reload”而不是rel =“stylesheet”。
<link rel="preload" href="path/to/mystylesheet.css" as="style" onload="this.rel='stylesheet'">
如果你正在使用php简单只需将当前时间附加到css的末尾就像
<link href="css/name.css?<?php echo
time(); ?>" rel="stylesheet">
所以现在每当你重新加载任何东西时，时间都会改变，浏览器会认为它是一个不同的文件，因为最后一点不断改变....你可以为任何文件执行此操作你强迫浏览器始终使用你想要的任何脚本语言刷新
可能不适用于您的情况，但这是我用于重新加载外部样式表的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);
});
}
看看Andrew Davey时髦的Vogue项目 - http://aboutcode.net/vogue/
还有一个jQuery解决方案
对于ID为“css”的单个样式表，请尝试以下操作：
$('#css').replaceWith('<link id="css" rel="stylesheet" href="css/main.css?t=' + Date.now() + '"></link>');
将其包含在具有全局scrope的函数中，您可以在Chrome中的Developer Console或Firefox中的Firebug中使用它：
var reloadCSS = function() {
$('#css').replaceWith('<link id="css" rel="stylesheet" href="css/main.css?t=' + Date.now() + '"></link>');
};
绝对没有必要为此使用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 += "";
}
}
Vanilla JS中的一个较短版本，在一行中：
for (var link of document.querySelectorAll("link[rel=stylesheet]")) link.href = link.href.replace(/\?.*|$/, "?ts=" + new Date().getTime())
或者扩大：
for (var link of document.querySelectorAll("link[rel=stylesheet]")) {
link.href = link.href.replace(/\?.*|$/, "?ts=" + new Date().getTime())
}
基于以前的解决方案，我使用JavaScript代码创建了书签：
javascript: { var toAppend = "trvhpqi=" + (new Date()).getTime(); var links = document.getElementsByTagName("link"); for (var i = 0; i < links.length;i++) { var link = links[i]; if (link.rel === "stylesheet") { if (link.href.indexOf("?") === -1) { link.href += "?" + toAppend; } else { if (link.href.indexOf("trvhpqi") === -1) { link.href += "&" + toAppend; } else { link.href = link.href.replace(/trvhpqi=\d{13}/, toAppend)} }; } } }; void(0);
来自Firefox的图片：
它有什么作用？
它通过添加查询字符串参数重新加载CSS（如上面的解决方案）：
是的，重新加载css标签。并记住使新网址唯一（通常通过附加随机查询参数）。我有代码可以做到这一点，但现在不能和我在一起。稍后会编辑......
编辑：太晚了...哈托和尼克夫打败了我;-)
我现在有这个：
function swapStyleSheet() {
var old = $('#pagestyle').attr('href');
var newCss = $('#changeCss').attr('href');
var sheet = newCss +Math.random(0,10);
$('#pagestyle').attr('href',sheet);
$('#profile').attr('href',old);
}
$("#changeCss").on("click", function(event) {
swapStyleSheet();
} );
使用带有新css url的href属性在页面中使用id changeCss创建任何元素。和一个起始css的链接元素：
<link id="pagestyle" rel="stylesheet" type="text/css" href="css1.css?t=" />
<img src="click.jpg" id="changeCss" href="css2.css?t=">