我想通过 javascript 重新加载 html 页面中的所有 CSS 样式表，而不重新加载页面。
我只在开发时才需要这个以反映 css 更改而无需一直刷新页面。
一种可能的解决方案是使用 javascript 在 css href 中添加 ?id=randomnumber 后缀，但我不想这样做。
我想以某种方式重新加载样式表，而不更改它的 url，浏览器将决定是否需要加载该 css 的新版本（如果服务器响应 @987654324 @)。
如何做到这一点？
【问题讨论】：
标签： javascript jquery html css dom
在纯 Javascript 中：
var links = document.getElementsByTagName("link");
for (var x in links) {
var link = links[x];
if (link.getAttribute("type").indexOf("css") > -1) {
link.href = link.href + "?id=" + new Date().getMilliseconds();
}
}
在 jQuery 中：
$("link").each(function() {
if $(this).attr("type").indexOf("css") > -1) {
$(this).attr("href", $(this).attr("href") + "?id=" + new Date().getMilliseconds());
}
});
确保在加载 DOM 树后加载此函数。
【讨论】：
jQuery，您可以使用jQuery 来查找相关的<link> 标记，而不是在href 属性中检查.css 的存在，这不一定是好指标。拥有<link rel="stylesheet" href="my-styles" /> 是完全有效的。另外，您拨打getElmeentsByTagName way 的次数太多了。相反，请使用$('link[rel=stylesheet]').each(...)。
"strict mode" 中失败了，您需要像var x 一样声明x
首先，向样式表链接标签添加一个 id（如果不存在），如下所示：
<link id="mainStyle" rel="stylesheet" href="style.css" />
接下来，在 Javascript（也使用 jQuery）中添加以下函数：
function freshStyle(stylesheet){
$('#mainStyle').attr('href',stylesheet);
}
最后，在你想要的事件上触发函数：
$('#logo').click(function(event){
event.preventDefault();
var restyled = 'style.css';
freshStyle(restyled);
});
通过更新链接样式表的值，即使它是相同的值，也会强制客户端再次查看；完成后，它将查看并（重新）加载最新文件。
如果您遇到缓存问题，请尝试将随机（伪）版本号附加到您的文件名，如下所示：
var restyled = 'style.css?v='+Math.random(0,10000);
希望这会有所帮助。上面 Dillen 的示例也适用，但如果您只想针对一个或一组样式表进行微调，则可以使用它。
【讨论】：
var restyled = 'style.css?v=' + new Date().getTime();
有更好的方法可以完成：
我只在开发时才需要这个以反映 css 更改而无需一直刷新页面。
一种方法是使用Grunt.js 到watch 进行文件更改，然后使用livereload 页面。
工作流程是这样的：
这可以与其他 Grunt 函数链接，例如 {sass|less|stylus} 预处理器编译，以创建如下工作流：
其他前端自动化资源：
来自 Google 员工的视频：http://www.youtube.com/watch?v=bntNYzCrzvE
【讨论】：
在 GoogleChrome 浏览器中非常简单。
按 F12，单击右下角的齿轮并选择选项禁用缓存（在 DevTools 处于打开状态时）。
【讨论】：
Grunt 的另一种选择是使用Prepros。
它还在您的项目文件夹中使用文件观察器，但针对您的所有文件。 （js，css，php）并在每次更改时重新加载页面。 (+ 如果这是像 css 这样的小视觉变化，它不会刷新页面，它会进行平滑过渡。(适用于颜色、定位等))
与 Grunt 一样，它可以编译和缩小您的文件，并允许您在指定的 url（不仅仅是 localhost）上进行实时预览。 （还有很多功能）
使用特殊端口，它甚至可以同步事件，例如 clic、鼠标滚轮、输入等。
【讨论】：