有没有简单的方法来重新加载CSS而不重新加载页面？
我正在尝试使用预览function制作一个实时的页内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的keydown上，虽然你可能会得到一些不需要的副作用（页面会随着你的input而不断变化）
编辑 ：testing和工作（在Firefox 3.5中，至less，但应该罚款与其他浏览器）。 在这里看到演示： http : //jsbin.com/owapi
可能不适用于你的情况，但这里是我用来重新加载外部样式表的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解决scheme
对于ID为“css”的单个样式表，试试这个：
$('#css').replaceWith('<link id="css" rel="stylesheet" href="css/main.css?t=' + Date.now() + '"></link>');
将其封装在具有全局缩放function的function中，您可以在Chrome中的Developer Console或Firefox中的Firebug中使用它：
var reloadCSS = function() { $('#css').replaceWith('<link id="css" rel="stylesheet" href="css/main.css?t=' + Date.now() + '"></link>'); };
基于以前的解决scheme，我已经创build了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的图片：
它有什么作用？
它通过添加查询string参数（上面的解决scheme）来重新加载CSS：
- Content / Site.css变成Content / Site.css？trvhpqi = 1409572193189（增加date）
- Content / Site.css？trvhpqi = 1409572193189成为Content / Site.css？trvhpqi = 1409572193200（date变更）
- http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,800italic,800,700italic,700,600italic,600&subset=latin,latin-ext become http://fonts.googleapis.com/css ？family = Open + Sans：400,300,300,300italic，800italic，800,700italic，700,600italic，600＆subs = latin，latin-ext＆trvhpqi = 1409572193189 （增加新的查询string参数和date）
这绝对没有必要使用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 += ""; } }
是的，重新加载css标签。 并记住使新的url唯一（通常是通过附加一个随机查询参数）。 我有代码来做到这一点，但现在不在我身边。 稍后再编辑…
编辑：太晚了…哈托和尼克打败了我; – ）
我现在有这个：
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(); } );
使页面中的任何元素与changeCss与具有新的css url的href属性。 和一个链接元素与启动的CSS：
<link id="pagestyle" rel="stylesheet" type="text/css" href="css1.css?t=" /> <img src="click.jpg" id="changeCss" href="css2.css?t=">
另一个答案：有一个名为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)();
Vanilla JS中的一个较短的版本，并且是可以embedded的。
扩展：
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())
以一种简单的方式，你可以使用rel =“reload”而不是rel =“stylesheet” 。
<link rel="preload" href="path/to/mystylesheet.css" as="style" onload="this.rel='stylesheet'">
