blocks|key|1149876|text|可能不适用于您的情况，但下面是我用来重新加载外部样式表的jQuery函数：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1149877|/**
+*+Forces+a+reload+of+all+stylesheets+by+appending+a+unique+query+string
+*+to+each+stylesheet+URL.
+*/
function+reloadStylesheets()+{
++++var+queryString+=+'?reload='+%2B+new+Date().getTime();
++++$('link[rel="stylesheet"]').each(function+()+{
++++++++this.href+=+this.href.replace(/\?.*%7C$/,+queryString);
++++});
}|code-block|syntax|javascript|1149878|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Possibly not applicable for your situation, but here's the jQuery function I use for reloading external stylesheets:

<pre><code>/**
 * 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);
 });
}
</code></pre>

blocks|key|1150020|text|为此，绝对不需要使用jQuery。下面的JavaScript函数将重新加载所有CSS文件：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1150021|function+reloadCss()
{
++++var+links+=+document.getElementsByTagName("link");
++++for+(var+cl+in+links)
++++{
++++++++var+link+=+links[cl];
++++++++if+(link.rel+===+"stylesheet")
++++++++++++link.href+%2B=+"";
++++}
}|code-block|syntax|javascript|1150022|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

There is absolutely no need to use jQuery for this. The following JavaScript function will reload all your CSS files:

<pre><code>function reloadCss()
{
 var links = document.getElementsByTagName("link");
 for (var cl in links)
 {
 var link = links[cl];
 if (link.rel === "stylesheet")
 link.href += "";
 }
}
</code></pre>

blocks|key|1149901|text|看看Andrew+Davey时髦的Vogue项目--+http://aboutcode.net/vogue/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1149902|entityMap|0|LINK|mutability|MUTABLE|url|http://aboutcode.net/vogue/^0|R|R|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

Check out Andrew Davey's snazzy Vogue project - <a href="http://aboutcode.net/vogue/" rel="noreferrer">http://aboutcode.net/vogue/</a>

blocks|key|1150050|text|在Vanilla+JS中有一个简短的版本，只有一行：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1150051|for+(var+link+of+document.querySelectorAll("link[rel=stylesheet]"))+link.href+=+link.href.replace(/\?.*%7C$/,+"?"+%2B+Date.now())|code-block|syntax|javascript|1150052|或扩展：|1150053|for+(var+link+of+document.querySelectorAll("link[rel=stylesheet]"))+{
++link.href+=+link.href.replace(/\?.*%7C$/,+"?"+%2B+Date.now())
}|1150054|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

A shorter version in Vanilla JS and in one line:

<pre><code>for (var link of document.querySelectorAll("link[rel=stylesheet]")) link.href = link.href.replace(/\?.*|$/, "?" + Date.now())
</code></pre>

Or expanded:

<pre><code>for (var link of document.querySelectorAll("link[rel=stylesheet]")) {
 link.href = link.href.replace(/\?.*|$/, "?" + Date.now())
}
</code></pre>

blocks|key|1149939|text|又一个jQuery解决方案|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1149940|对于id为"css“的单个样式表，请尝试如下所示：|1149941|$('#css').replaceWith('<link+id="css"+rel="stylesheet"+href="css/main.css?t='+%2B+Date.now()+%2B+'"></link>');|code-block|syntax|javascript|1149942|将其封装在一个具有全局滚动的函数中，您可以在Chrome的开发人员控制台或Firefox的Firebug中使用它：|1149943|var+reloadCSS+=+function()+{
++$('#css').replaceWith('<link+id="css"+rel="stylesheet"+href="css/main.css?t='+%2B+Date.now()+%2B+'"></link>');
};|1149944|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

One more jQuery solution

For a single stylesheet with id "css" try this:

<pre><code>$('#css').replaceWith('&lt;link id="css" rel="stylesheet" href="css/main.css?t=' + Date.now() + '"&gt;&lt;/link&gt;');
</code></pre>

Wrap it in a function that has global scrope and you can use it from the Developer Console in Chrome or Firebug in Firefox:

<pre><code>var reloadCSS = function() {
 $('#css').replaceWith('&lt;link id="css" rel="stylesheet" href="css/main.css?t=' + Date.now() + '"&gt;&lt;/link&gt;');
};
</code></pre>

blocks|key|1149969|text|我现在有了这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1149970|++++function+swapStyleSheet()+{
++++++++var+old+=+$('#pagestyle').attr('href');
++++++++var+newCss+=+$('#changeCss').attr('href');
++++++++var+sheet+=+newCss+%2BMath.random(0,10);
++++++++$('#pagestyle').attr('href',sheet);
++++++++$('#profile').attr('href',old);
++++++++}
++++$("#changeCss").on("click",+function(event)+{+
++++++++swapStyleSheet();
++++}+);|code-block|syntax|javascript|1149971|使页面中id为changeCss的任何元素都带有href属性和新的css+url。和一个带有起始css的link元素：|1149972|<link+id="pagestyle"+rel="stylesheet"+type="text/css"+href="css1.css?t="+/>

<img+src="click.jpg"+id="changeCss"+href="css2.css?t=">|1149973|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

i now have this:

<pre><code> 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();
 } );
</code></pre>

make any element in your page with id changeCss with a href attribute with the new css url in it. and a link element with the starting css:

<pre><code>&lt;link id="pagestyle" rel="stylesheet" type="text/css" href="css1.css?t=" /&gt;

&lt;img src="click.jpg" id="changeCss" href="css2.css?t="&gt;
</code></pre>

blocks|key|1365044|text|另一个答案是:有一个名为ReCSS的小书签。我没有广泛地使用它，但似乎起作用了。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1365045|该页面上有一个bookmarklet可以拖放到您的地址栏上(在这里似乎无法创建一个)。如果它被破坏了，下面是代码：|1365046|javascript:void(function()%257Bvar%2520i,a,s;a=document.getElementsByTagName('link');for(i=0;i%253Ca.length;i%2B%2B)%257Bs=a[i];if(s.rel.toLowerCase().indexOf('stylesheet')%253E=0&&s.href)%2520%257Bvar%2520h=s.href.replace(/(&%257C%255C?)forceReload=%255Cd%2520/,'');s.href=h%2520(h.indexOf('?')%253E=0?'&':'?')%2520'forceReload='%2520(new%2520Date().valueOf())%257D%257D%257D)();|code-block|syntax|javascript|1365047|entityMap|0|LINK|mutability|MUTABLE|url|http://david.dojotoolkit.org/recss.html?utm_source=www.domtail.com^0|C|5|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

Another answer:
There's a bookmarklet called <a href="http://david.dojotoolkit.org/recss.html?utm_source=www.domtail.com" rel="nofollow">ReCSS</a>. I haven't used it extensively, but seems to work.

There's a bookmarklet on that page to drag and drop onto your address bar (Can't seem to make one here). In case that's broke, here's the code:

<pre><code>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&amp;&amp;s.href)%20%7Bvar%20h=s.href.replace(/(&amp;%7C%5C?)forceReload=%5Cd%20/,'');s.href=h%20(h.indexOf('?')%3E=0?'&amp;':'?')%20'forceReload='%20(new%20Date().valueOf())%7D%7D%7D)();
</code></pre>

blocks|key|1150105|text|如果你正在使用php，那么简单的方法就是在css的末尾附加当前时间，如下所示|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1150106|<link+href="css/name.css?<?php+echo+
time();+?>"+rel="stylesheet">|code-block|syntax|javascript|1150107|所以现在你每次重新加载任何文件，时间都会改变，浏览器会认为它是一个不同的文件，因为最后一位一直在变化……您可以对任何文件执行此操作，强制浏览器始终使用您想要的任何脚本语言刷新|1150108|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

simple if u are using php
Just append the current time at the end of the css like 

<pre><code>&lt;link href="css/name.css?&lt;?php echo 
time(); ?&gt;" rel="stylesheet"&gt;
</code></pre>

So now everytime u reload whatever it is , the time changes and browser thinks its a different file since the last bit keeps changing.... U can do this for any file u force the browser to always refresh using whatever scripting language u want

blocks|key|1150269|text|由于这个问题在2019年的stackoverflow中显示，我想使用更现代的JavaScript添加我的贡献。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1150270|具体地说，对于没有内联的CSS样式表--因为它已经在原始问题中以某种方式被覆盖了。|1150271|首先，注意我们仍然没有可构造的Stylesheet对象。然而，我们希望他们很快就能登陆。|1150272|同时，假设HTML内容如下：|1150273|<!DOCTYPE+html>
<html+lang="en">
++<head>
++++<meta+charset="utf-8"+/>
++++<link+id="theme"+rel="stylesheet"+type="text/css"+href="./index.css"+/>
++++<script+src="./index.js"></script>
++</head>
++<body>
++++Hello+World
++++<button+onclick="reload('theme')">Reload</button>
++</body>
</html>|code-block|syntax|javascript|1150274|我们可以的，在index.js|offset|length|style|CODE|1150275|//+Utility+function+to+generate+a+promise+that+is+
//+resolved+when+the+`target`+resource+is+loaded,
//+and+rejected+if+it+fails+to+load.
//
const+load+=+target+=>
++new+Promise((rs,+rj)+=>+{
++++target.addEventListener("load",+rs,+{+once:+true+});
++++target.addEventListener(
++++++"error",
++++++rj.bind(null,+`Can't+load+${target.href}`),
++++++{+once:+true+}
++++);
++});


//+Here+the+reload+function+called+by+the+button.
//+It+takes+an+`id`+of+the+stylesheet+that+needs+to+be+reloaded
async+function+reload(id)+{
++const+link+=+document.getElementById(id);

++if+(!link+%7C%7C+!link.href)+{
++++throw+new+Error(`Can't+reload+'${id}',+element+or+href+attribute+missing.`);
++}

++//+Here+the+relevant+part.
++//+We're+fetching+the+stylesheet+from+the+server,+specifying+`reload`
++//+as+cache+setting,+since+that+is+our+intention.
++//+With+`reload`,+the+browser+fetches+the+resource+*without*+first+looking
++//+in+the+cache,+but+then+will+update+the+cache+with+the+downloaded+resource.
++//+So+any+other+pages+that+request+the+same+file+and+hit+the+cache+first,
++//+will+use+the+updated+version+instead+of+the+old+ones.
++let+response+=+await+fetch(link.href,+{+cache:+"reload"+});

++//+Once+we+fetched+the+stylesheet+and+replaced+in+the+cache,
++//+We+want+also+to+replace+it+in+the+document,+so+we're
++//+creating+a+URL+from+the+response's+blob:
++let+url+=+await+URL.createObjectURL(await+response.blob());

++//+Then,+we+create+another+`<link>`+element+to+display+the+updated+style,
++//+linked+to+the+original+one;+but+only+if+we+didn't+create+previously:
++let+updated+=+document.querySelector(`[data-link-id=${id}]`);

++if+(!updated)+{
++++updated+=+document.createElement("link");
++++updated.rel+=+"stylesheet";
++++updated.type+=+"text/css";
++++updated.dataset.linkId+=+id;
++++link.parentElement.insertBefore(updated,+link);

++++//+At+this+point+we+disable+the+original+stylesheet,
++++//+so+it+won't+be+applied+to+the+document+anymore.
++++link.disabled+=+true;
++}

++//+We+set+the+new+<link>+href...
++updated.href+=+url;

++//+...Waiting+that+is+loaded...
++await+load(updated);

++//+...and+finally+tell+to+the+browser+that+we+don't+need
++//+the+blob's+URL+anymore,+so+it+can+be+released.
++URL.revokeObjectURL(url);
}|1150276|entityMap^0|0|0|0|0|0|7|8|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|Z|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|10|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|11|8|@$O|12|P|13|Q|R]]|9|@]|A|$]]|$1|S|3|T|5|J|7|14|8|@]|9|@]|A|$K|L]]|$1|U|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|V|$]]

Since this question was shown in the stackoverflow in 2019, I'd like to add my contribution using a more modern JavaScript.

Specifically, for CSS Stylesheet that are not inline – since that is already covered from the original question, somehow.

First of all, notice that we still don't have Constructable Stylesheet Objects. However, we hope to have them landed soon.

In the meantime, assuming the following HTML content:

<pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;meta charset="utf-8" /&gt;
 &lt;link id="theme" rel="stylesheet" type="text/css" href="./index.css" /&gt;
 &lt;script src="./index.js"&gt;&lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;p&gt;Hello World&lt;/p&gt;
 &lt;button onclick="reload('theme')"&gt;Reload&lt;/button&gt;
 &lt;/body&gt;
&lt;/html&gt;

</code></pre>

We could have, in <code>index.js</code>:

<pre><code>// Utility function to generate a promise that is 
// resolved when the `target` resource is loaded,
// and rejected if it fails to load.
//
const load = target =&gt;
 new Promise((rs, rj) =&gt; {
 target.addEventListener("load", rs, { once: true });
 target.addEventListener(
 "error",
 rj.bind(null, `Can't load ${target.href}`),
 { once: true }
 );
 });


// Here the reload function called by the button.
// It takes an `id` of the stylesheet that needs to be reloaded
async function reload(id) {
 const link = document.getElementById(id);

 if (!link || !link.href) {
 throw new Error(`Can't reload '${id}', element or href attribute missing.`);
 }

 // Here the relevant part.
 // We're fetching the stylesheet from the server, specifying `reload`
 // as cache setting, since that is our intention.
 // With `reload`, the browser fetches the resource *without* first looking
 // in the cache, but then will update the cache with the downloaded resource.
 // So any other pages that request the same file and hit the cache first,
 // will use the updated version instead of the old ones.
 let response = await fetch(link.href, { cache: "reload" });

 // Once we fetched the stylesheet and replaced in the cache,
 // We want also to replace it in the document, so we're
 // creating a URL from the response's blob:
 let url = await URL.createObjectURL(await response.blob());

 // Then, we create another `&lt;link&gt;` element to display the updated style,
 // linked to the original one; but only if we didn't create previously:
 let updated = document.querySelector(`[data-link-id=${id}]`);

 if (!updated) {
 updated = document.createElement("link");
 updated.rel = "stylesheet";
 updated.type = "text/css";
 updated.dataset.linkId = id;
 link.parentElement.insertBefore(updated, link);

 // At this point we disable the original stylesheet,
 // so it won't be applied to the document anymore.
 link.disabled = true;
 }

 // We set the new &lt;link&gt; href...
 updated.href = url;

 // ...Waiting that is loaded...
 await load(updated);

 // ...and finally tell to the browser that we don't need
 // the blob's URL anymore, so it can be released.
 URL.revokeObjectURL(url);
}
</code></pre>

blocks|key|1364886|text|是，重新加载css标签。并且记住使新的url唯一(通常通过附加随机查询参数)。我有代码可以做到这一点，但我现在还没有。稍后将进行编辑...|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1364887|编辑:为时已晚...哈托和尼克夫先我一步;-)|1364888|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

Yes, reload the css tag. And remember to make the new url unique (usually by appending a random query parameter). I have code to do this but not with me right now. Will edit later...

edit: too late... harto and nickf beat me to it ;-)

I'm trying to make a live, in-page css editor with a preview function that would reload the stylesheet and apply it without needing to reload the page. What would be the best way to go about this?

Is there an easy way to reload css without reloading the page?

jQuery

我正在尝试创建一个具有预览功能的实时页面内css编辑器，该编辑器将重新加载样式表并应用它，而无需重新加载页面。最好的方法是什么？

问有没有一种简单的方法可以不用重新加载页面就重新加载css？
EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问有没有一种简单的方法可以不用重新加载页面就重新加载css？EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问有没有一种简单的方法可以不用重新加载页面就重新加载css？
EN