我有几本关于 AJAX 的书,但还是很新。所有教程和这些书籍都有无处不在的示例:自动填充搜索栏和异步表单验证器。这些都很棒,但不是我要找的。具体来说,我想单击一个按钮并在我的 header 包含中切换外部 CSS 文件。这可能吗?好吧……我知道这是可能的,但你是怎么做到的?
PS:我在这个元素中有 jQuery,所以如果有内置的东西,那就更好了!
PPS:我意识到我没有包含重要信息(不要开枪!):
此操作的最终目标是拥有一个用户设置部分,用户可以在其中单击单选按钮并决定他们要为我们的应用程序使用的配色方案。所以我们最终会有 8 种不同的 CSS 样式可供选择。不确定这是否会改变实现此目标的最佳方法。
用户正在登录他们的帐户并在那里更改他们的设置。我希望他们的更改“坚持”直到他们决定再次更改样式表。我可以在 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。
关于javascript - 如何切换外部 CSS 文件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2090657/