javascript - 如何切换外部 CSS 文件?

标签 javascript jquery css ajax

我有几本关于 AJAX 的书,但还是很新。所有教程和这些书籍都有无处不在的示例:自动填充搜索栏和异步表单验证器。这些都很棒,但不是我要找的。具体来说,我想单击一个按钮并在我的 header 包含中切换外部 CSS 文件。这可能吗?好吧……我知道这是可能的,但你是怎么做到的?

PS:我在这个元素中有 jQuery,所以如果有内置的东西,那就更好了!

PPS:我意识到我没有包含重要信息(不要开枪!):

  1. 此操作的最终目标是拥有一个用户设置部分,用户可以在其中单击单选按钮并决定他们要为我们的应用程序使用的配色方案。所以我们最终会有 8 种不同的 CSS 样式可供选择。不确定这是否会改变实现此目标的最佳方法。

  2. 用户正在登录他们的帐户并在那里更改他们的设置。我希望他们的更改“坚持”直到他们决定再次更改样式表。我可以在 MySQL 中手动执行此操作,因为我们有一个名为样式表的表,其中包含各种用户样式表编号...所以实际上,我需要做的是异步更改 MySQL 值,以便立即加载 CSS。

最佳答案

id 属性添加到 CSS link 标签以使用 JavaScript 操作标签:

<link id="cssfile" href="css/avocado.css" type="text/css" rel="stylesheet">

设置 href 属性的 Javascript 类似于:

document.getElementById('cssfile').href = 'css/carrot.css';

用户可以通过单击链接来调整颜色:

<a href="#"
 onclick="document.getElementById('cssfile').href='css/carrot.css';">Carrots</a>

通过更改媒体类型,这还可以让用户快速更改打印布局、手机(或平板电脑)上的首选布局等。

此解决方案不需要 jQuery。

另请参阅:http://www.webmasterworld.com/forum91/4554.htm

关于javascript - 如何切换外部 CSS 文件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2090657/

相关文章:

javascript 正则表达式从 6 个句子的中间提取一个单词

jquery - 选择2 : How to get only current selected value

javascript - JQuery UI 自动完成,更改事件不会触发

javascript - 输入范围使水平线上的小垂直线

javascript - 为什么在 Linux 的 Node JS 上有一个 'js' 命令?

javascript - Node.js - POST 到 iFrame?

javascript - 图标克隆元素放在错误的位置

jquery - 为什么调用我的 ASP.NET WebMethod 会调用我的错误处理程序?

css - CSS 中的左对齐文本和右对齐图像

css -::after 似乎没有达到我的预期?