javascript 在不刷新页面的情况下更新网站的 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12686331/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Update the CSS of a Website without refreshing the Page
提问by
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.
我用 CSS 创建了一个页面。现在我必须从我的编辑器更改为我的浏览器并刷新整个页面，以便查看每一个小的更改。但是我不想刷新页面，因为我有一些动画。
So is there anything which I can use that my site updates automatically after a CSS update?
Maybe with JavaScript, jQuery, Ajax or something?
那么，在 CSS 更新后，我的网站是否可以自动更新？
也许使用 JavaScript、jQuery、Ajax 或其他什么？
采纳答案by Michael Schmidt
Here you are: http://cssrefresh.frebsite.nl/
你在这里：http: //cssrefresh.frebsite.nl/
CSSrefresh is a small, unobstructive javascript file that monitors the CSS-files included in your webpage. As soon as you save a CSS-file, the changes are directly implemented, without having to refresh your browser.
CSSrefresh 是一个小的、无障碍的 javascript 文件，用于监控网页中包含的 CSS 文件。保存 CSS 文件后，更改将直接实施，无需刷新浏览器。
Just insert the javascript file and it works!
只需插入 javascript 文件，它就可以工作了！
But note: It only works when you have the files on a server!
但请注意：它仅在服务器上有文件时才有效！
Edit: LiveStyle
编辑：LiveStyle
If you develop with Sublime Textand Google Chrome or Apple Safari, then you should use Emmet LiveStyle. This is a more powerful Live CSS-Reloader.
Now I use it instead of CSS Refresh.
如果您使用Sublime Text和 Google Chrome 或 Apple Safari 进行开发，那么您应该使用Emmet LiveStyle。这是一个更强大的 Live CSS-Reloader。
现在我用它代替CSS Refresh。
If you want more information about this awesome plugin, please read the Post by Smashing Magazine
如果您想了解有关这个很棒的插件的更多信息，请阅读Smashing Magazine的帖子
回答by Sebass van Boxel
With jQuery you can create a function that reloads external stylesheets.
使用 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);
});
}
回答by Hendrik
Have a look at http://livereload.com/.
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.
它用作 OS X 和 Windows 的浏览器插件。我喜欢它，因为我不必嵌入额外的 javascript，我可能会不小心在我的版本控制中提交。
回答by Jon Adams
I find browser plugins/extensions to be the easiest solution. They don't require any code changes to your individual sites. And they can be used for any site on the web — which is useful if I modify something in-memory real quick to hide a toolbar or fix a bug temporarily; once finished mucking with it, I can press a key and all the CSS is back to normal.
我发现浏览器插件/扩展是最简单的解决方案。它们不需要对您的单个站点进行任何代码更改。它们可用于网络上的任何站点——如果我快速修改内存中的某些内容以隐藏工具栏或临时修复错误，这将非常有用；一旦完成处理，我可以按下一个键，所有的 CSS 都恢复正常。
Once installed, (most) CSS reloaded plugins/extensions don't reload the CSS automatically. But usually work with something as simple as a toolbar button, a context menu item, and/or a simple key press to reload the CSS. I find this method is less error prone anyway, and is much less complicated then some of the automated solutions out there.
安装后，（大多数）CSS 重新加载的插件/扩展不会自动重新加载 CSS。但通常使用工具栏按钮、上下文菜单项和/或简单的按键来重新加载 CSS。我发现这种方法无论如何都不太容易出错，而且也没有一些自动化解决方案那么复杂。
Some examples (feel free to suggest some others):
一些例子（随意推荐一些其他的）：
Chrome:
铬合金：
- tin.cr(includes automatic reload, and can persist in-browser changes to source files)
- CSS Refresh
Firefox:
火狐：
回答by Albert Einstein
Here is my little Project. Please give it a try
CSS Auto reload on Github
这是我的小项目。请在 Github 上试试
CSS Auto reload
回答by Darren
Yes you can manipulate the CSSvia jQuery:
是的，您可以操作CSS通过jQuery：
$(".classToBeReplaced").switchClass( "classToBeReplaced", "newClass", 1000 );
You could also use the toggleClassmethod.
您也可以使用该toggleClass方法。
http://api.jquery.com/toggleClass/
http://api.jquery.com/toggleClass/
回答by Levente Pánczél
Firebug for FireFox.
FireFox 的 Firebug。
It's a plugin in an attached/separate window. Changes to HTML/CSS appear instantly, elements are highlighted.
它是附加/单独窗口中的插件。对 HTML/CSS 的更改会立即出现，元素会突出显示。
Advantage over JS hacks is that you can't copy this accidentally to your production instance.
与 JS hack 相比的优势在于您不能将其意外复制到您的生产实例中。
回答by jeffslofish
The new open-source code editor, brackets, has a Live Developmentfeature where you can edit CSS in the editor and it will immediately be reflected in the chrome browser. It currently only works for CSS editing, but HTML editing is coming soon!
新的开源代码编辑器，括号，具有实时开发功能，您可以在编辑器中编辑 CSS，它会立即反映在 chrome 浏览器中。它目前仅适用于 CSS 编辑，但 HTML 编辑即将推出！
回答by Zim84
Firebug for Firefox is my prefered method: https://addons.mozilla.org/de/firefox/addon/firebug/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.
Firebug for Firefox 是我的首选方法：https: //addons.mozilla.org/de/firefox/addon/firebug/您可以即时编辑 HTML 和 CSS，快速停用 CSS 规则（不删除它们），添加或删除 HTML等等。如果你不想调整你的设计，这是你的选择。您甚至可以将更改保存到本地副本，但我几乎从未使用过该功能。
回答by Brian Noah
You are looking for Live Reload:
您正在寻找实时重载：
It's available as a browser extension and easy to implement
它可作为浏览器扩展程序使用且易于实现
