blocks|key|466103|text|使用jQuery可以创建一个重载外部样式表的函数。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|466104|/**
+*+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|466105|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|$]]

With jQuery you can create a function that reloads 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|249614|text|看看http://livereload.com/吧。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|249615|它可以作为OS+X和windows的浏览器插件。我喜欢它，因为我不需要嵌入额外的javascript，因为我可能会在我的版本控制中意外地提交它。|249616|entityMap|0|LINK|mutability|MUTABLE|url|http://livereload.com/^0|2|M|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

Have a look at <a href="http://livereload.com/" rel="nofollow">http://livereload.com/</a>.

It works as a browser plugin for OS X and windows. I like it because I do not have to embed additional javascript which I could accidentally commit in my versioning control.

blocks|key|249639|text|这是我的小项目。请试一试|type|unstyled|depth|inlineStyleRanges|entityRanges|data|249640|CSS+Auto+reload+on+Github|offset|length|249641|entityMap|0|LINK|mutability|MUTABLE|url|http://nv.github.com/css_auto-reload/^0|0|0|P|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

Here is my little Project. Please give it a try 
<a href="http://nv.github.com/css_auto-reload/" rel="nofollow">CSS Auto reload on Github</a>

blocks|key|466130|text|可以，您可以通过jQuery操作CSS|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|466131|$(".classToBeReplaced").switchClass(+"classToBeReplaced",+"newClass",+1000+);|code-block|syntax|javascript|466132|您还可以使用toggleClass方法。|466133|http://api.jquery.com/toggleClass/|466134|http://jqueryui.com/demos/switchClass/|466135|entityMap|0|LINK|mutability|MUTABLE|url|1^0|8|6|G|3|0|0|6|B|0|0|Y|0|0|0|12|1|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]|$9|11|A|12|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|13|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|14|8|@$9|15|A|16|B|C]]|D|@]|E|$]]|$1|M|3|N|5|6|7|17|8|@]|D|@$9|18|A|19|1|1A]]|E|$]]|$1|O|3|P|5|6|7|1B|8|@]|D|@$9|1C|A|1D|1|1E]]|E|$]]|$1|Q|3|-4|5|6|7|1F|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|N]]|X|$5|T|U|V|E|$W|P]]]]

Yes you can manipulate the <code>CSS</code> via <code>jQuery</code>:

<pre><code>$(".classToBeReplaced").switchClass( "classToBeReplaced", "newClass", 1000 );
</code></pre>

You could also use the <code>toggleClass</code> method. 

<a href="http://api.jquery.com/toggleClass/" rel="nofollow">http://api.jquery.com/toggleClass/</a>

<a href="http://jqueryui.com/demos/switchClass/" rel="nofollow">http://jqueryui.com/demos/switchClass/</a>

blocks|key|249704|text|FireFox的Firebug。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|249705|它是一个附加/独立窗口中的插件。对HTML/CSS的更改会立即出现，元素会高亮显示。|249706|与JS+hacks相比的优势在于，您不能意外地将其复制到您的生产实例中。|249707|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

Firebug for FireFox.

It's a plugin in an attached/separate window. Changes to HTML/CSS appear instantly, elements are highlighted.

Advantage over JS hacks is that you can't copy this accidentally to your production instance.

blocks|key|249677|text|您正在寻找实时重新加载：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|249678|它可以作为浏览器扩展使用，并且易于实现|249679|http://livereload.com/|offset|length|249680|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|M|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|6|7|Q|8|@]|9|@$F|R|G|S|1|T]]|A|$]]|$1|H|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|E]]]]

You are looking for Live Reload:

It's available as a browser extension and easy to implement

<a href="http://livereload.com/" rel="nofollow">http://livereload.com/</a>

blocks|key|249730|text|Firefox的Firebug是我更喜欢的方法：https://addons.mozilla.org/de/firefox/addon/firebug/你可以动态地编辑HTML和CSS，快速停用CSS规则(不删除它们)，添加或删除HTML等等。如果你不想调整你的设计，这是你的选择。您甚至可以保存对本地副本的更改，但我很少使用该功能。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|249731|entityMap|0|LINK|mutability|MUTABLE|url|https://addons.mozilla.org/de/firefox/addon/firebug/^0|O|1G|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]]]]

Firebug for Firefox is my prefered method:
<a href="https://addons.mozilla.org/de/firefox/addon/firebug/" rel="nofollow">https://addons.mozilla.org/de/firefox/addon/firebug/</a>
You can edit HTML and CSS on the fly, quickly deactivate CSS rules (without deleting them), add or remove HTML and so on. If you wan't to tweak your design this is your choice. You can even save changes to a local copy, but I hardly ever use that feature.

blocks|key|466196|text|这可能对->+chaicode有帮助|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|466197|这是一个活生生的CSS，Javascript和HTML编辑器，这是一个开源和wip。github|466198|entityMap|0|LINK|mutability|MUTABLE|url|http://chaicode-3lads.rhcloud.com/|1|http://github.com/zeusdeux/chaicode^0|7|8|0|0|16|6|1|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]]]

This might help -> <a href="http://chaicode-3lads.rhcloud.com/" rel="nofollow noreferrer">chaicode</a>

Its a live CSS, Javascript and HTML editor that is opensource and a wip.
<a href="http://github.com/zeusdeux/chaicode" rel="nofollow noreferrer">github</a>

blocks|key|466346|text|如果你使用的是Firefox，那么你可以从Firefox的Add-on安装Web+Developer+Toolbar+1.2.2，它有重新加载链接样式表的选项。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|466347|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

If you are using Firefox then you can install Web Developer Toolbar 1.2.2 from Add-on of Firefox which has option of Reload Linked Stylesheets.

blocks|key|466397|text|尝试使用CSS+Brush，一个用于创建CSS+live的chrome插件。您不必在文本编辑器中编写所有CSS，返回到浏览器并重新加载它，而是像在文本编辑器中一样实时编写CSS。你将拥有比文本编辑器更多的功能，比如上下文相关菜单，使用重复的属性，选择完整的CSS路径或直接从页面中选择元素的过滤路径。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|466398|entityMap|0|LINK|mutability|MUTABLE|url|https://chrome.google.com/webstore/detail/css-brush/mamnhhinmmdpcipjnhflillmhnogoobj?hl=en-US^0|4|9|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]]]]

Try using <a href="https://chrome.google.com/webstore/detail/css-brush/mamnhhinmmdpcipjnhflillmhnogoobj?hl=en-US" rel="nofollow">CSS Brush</a>, a chrome plugin for creating CSS live. You needn't have to write all CSS in a text editor, come back to browser and reload it, rather write the CSS live as if you were doing it in a text editor. You will have more features than a text editor here like context-sensitive-menu, use duplicate properties, select complete CSS path or a filtered path of a element directly from the page.

I've created a page with CSS. Now I must change from my editor to my browser and refresh the full page, just to have a look at every little change. But I don't want to refresh the page, because I have some animations.

So is there anything which I can use that my site updates automatically after a CSS update? 
Maybe with JavaScript, jQuery, Ajax or something?

Update the CSS of a Website without refreshing the Page

jQuery

我已经用CSS创建了一个页面。现在，我必须从编辑器切换到浏览器，并刷新整个页面，以便查看每一处微小的更改。但我不想刷新页面，因为我有一些动画。那么有没有什么东西可以让我的网站在CSS更新后自动更新呢？也许可以使用JavaScript、jQuery、Ajax或其他什么？

问更新网站的CSS而不刷新页面
EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问更新网站的CSS而不刷新页面EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问更新网站的CSS而不刷新页面
EN