用javascript重新加载CSS样式表

我想通过javascript重新加载html页面中的所有CSS样式表，而不必重新加载页面。

我只需要在开发时使用它来反映css的变化，而不需要一直刷新页面

一个可能的解决方案是使用javascript向css HREF添加一个

？id=randomnumber

后缀，但我不想这样做

我想以某种方式重新加载样式表，而不更改其url，浏览器将决定是否需要加载该css的新版本（如果服务器响应为

304-未修改
）

如何实现这一点？
在纯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树后加载此函数。
有更好的方法来完成：

我只需要在开发时使用它来反映css的变化，而不需要一直刷新页面

一种方法是使用来更改文件，然后是页面

工作流程如下所示：

var restyled = 'style.css?v='+Math.random(0,10000);


保存css文档
格伦特手表看到了变化
live在页面上重新加载css

这可以与其他Grunt函数链接，例如{sass | less | stylus}预处理器编译，以创建如下工作流：

var restyled = 'style.css?v='+Math.random(0,10000);


保存Sass文件
守望相助
sass被编译并缩小到cdn位置
新的css被加载到页面上

其他前端自动化资源：

谷歌员工视频：


在谷歌Chrome浏览器中非常简单

按F12键，单击右下角的齿轮，然后选择选项“禁用缓存”（DevTools处于打开状态）


首先，在样式表链接标记中添加一个id（如果不存在），如下所示：

<link id="mainStyle" rel="stylesheet" href="style.css" />

最后，在所需事件上触发函数：

$('#logo').click(function(event){
    event.preventDefault();
    var restyled = 'style.css'; 
    freshStyle(restyled);
});

通过更新链接样式表的值，即使它是相同的值，也会迫使客户端再次查看；当它这样做时，它将看到并（重新）加载最新的文件

如果缓存出现问题，请尝试在文件名中添加随机（psuedo）版本号，如下所示：

var restyled = 'style.css?v='+Math.random(0,10000);

希望这有帮助。Dillen上面的例子同样有效，但是如果您只想针对一个或一组样式表进行轻微调整，您可以使用它。
Grunt的另一种选择是使用

它还对项目文件夹使用文件监视程序，但对所有文件都使用。（js、css、php）并在每次更改时重新加载页面。（+如果这是一个像css这样的小的视觉变化，它不会刷新页面，它会进行平滑的转换。（适用于颜色、定位等）

像Grunt一样，它编译和缩小文件，并允许您在指定的url（而不仅仅是本地主机）上进行实时预览。（还有更多的功能）

使用特殊端口，它甚至可以同步事件，如clic、鼠标滚轮、输入等。
您可能对这些答案感兴趣。这个话题和你的问题很相关。希望它有助于一个ajax头请求，如果内容已经修改加载整个css。当然！这是一种Javascript客户端脚本语言，由浏览器执行，因此不会重新加载当前页面。CSS页面将被重新加载。谢谢你，迪伦，但我不想改变链接的href，正如我指出的：“不改变它的url”。我希望浏览器根据服务器响应决定是否需要加载新版本，或者缓存的版本是最新版本。O抱歉，我误解了您的问题！关键是当你不添加一个随机id或者其他东西时，缓存总是被加载的。编辑：您可以做的是发出一个Ajax请求，返回新的CSS内容，然后用当前的CSS内容检查它。基于此，您可以重新加载或不重新加载CSS页面。由于此页面被标记为
jQuery
，因此您可以使用jQuery查找相关的
标记，而不是检查href属性中是否存在
.CSS
，这不一定是一个好的指示器。拥有
是完全有效的。另外，您调用
getElmeentsByTagName
的次数太多了。相反，使用
$（'link[rel=stylesheet]'）。每个（…）
都想指出，在
的“严格模式”
中，这会失败。您需要声明
x
像
var x
一样，但这会重新加载样式表吗？是的。此选项告诉浏览器在打开DevTools面板时重新加载样式表。@Bergi此选项禁用缓存，因此样式表和javascript文件将重新加载。我认为FF和IE应该有一个相同的选项。您可以使用当前时间而不是Math.random:
var restyled='style.css？v='+new Date（）.getTime（）这就是要走的路！