jQuery 将外部 css 文件附加到所有 HTML 页面
Posted
技术标签:
【中文标题】jQuery 将外部 css 文件附加到所有 HTML 页面【英文标题】：jQuery append external css file to all HTML pages 【发布时间】：2016-03-28 12:42:23 【问题描述】：我有 2 个不同的 CSS 文件用于 2 个客户端
如果我从 indexer page 中选择 option 1，则所有内部 html 页面都应附加到 css 文件下方：
<link rel="stylesheet" type="text/css" href="css/client1.css">
或者如果我选择选项 2，那么它应该在 css 文件下面加载：
<link rel="stylesheet" type="text/css" href="css/client2.css">
但是，此更改必须发生在 pages/
下的所有 html 文件中Indexer.html
<select class="selInput" id="selectClient">
<option>-- Select Client --</option>
<option value="client1">Client 1</option>
<option value="client2">Client 2</option>
</select>
<script>
$(document).ready(function()
$( document ).on( "change", "#selectClient", function()
jQuery(this).find("option:selected").each(function()
if($(this).attr("value")=="client1-script")
$("body").load("css/client1.css");
else if($(this).attr("value")=="client2-script")
$("body").load("css/client2.css");
);
);
);
</script>
【问题讨论】：
为什么不包括其中两个文件。那么只需相应地在body 上添加或删除类？
你了解.load() 的工作原理吗？
嗨@Praveen Kumar...对不起，那只是为了演示..我对脚本没有太多想法:(
嗨 @roullie.. 在这种情况下，我想将 all html pages 归类到 pages/ foler
@Reddy 那么您必须将所选选项保存在某处。数据库、会话、cookies 任你选择。
【参考方案1】：
您有两种选择：
同时加载 CSS 并使用类来区分它们。
考虑client1.css：
body.client1 /* rules */
body.client1 h1 /* rules */
body.client1 p /* rules */
body.client1 ul,
body.client1 ol /* rules */
考虑client2.css：
body.client2 /* rules */
body.client2 h1 /* rules */
body.client2 p /* rules */
body.client2 ul,
body.client2 ol /* rules */
在您的 HTML 中：
<body class="client1"> <!-- if client 1 -->
<body class="client2"> <!-- if client 2 -->
在你的 javascript 中：
$(function ()
$("body").on("change", "#selectClient", function ()
$("#body").removeClass("client1 client2").addClass("client" + $(this).val());
);
);
使用 <link /> 和 id 并更改 href。
在你的<head>:
<link rel="stylesheet" type="text/css" href="css/client1.css" id="style" />
在你的 JavaScript 中：
$(function ()
$("body").on("change", "#selectClient", function ()
$("#style").attr("href", "css/client" + $(this).val() + ".css");
);
);
【讨论】：
@Praveen Kumar...感谢您的宝贵时间，它仅适用于当前页面...但我想要的是：在 index.html，如果我选择 client1 选项，此页面将导航到加载“client1.css”文件的 client.html 页面.. 并且剩余的 html 页面也应该加载client1.css 文件...请问可以吗？ @Reddy 我建议你去这个插件：jQuery.cookie 并在你改变时设置它。
@Praveen Kumar 再次感谢...将通过它，并为您的答案投票:)...
@Reddy 一切顺利。以上是关于jQuery 将外部 css 文件附加到所有 HTML 页面的主要内容，如果未能解决你的问题，请参考以下文章
使用外部 CSS 文件将 jQuery UI 添加到 Greasemonkey 脚本失败