如何使用单选按钮和JavaScript启用禁用的CSS以更改网站的完整颜色

Question

让我们假设我有两个CSS文件。两者都与我的index.html链接。让我们假设其中一个CSS文件包含所有红色主题，另一个包含蓝色主题。因此，如果我们启用第一个，我们的网站就会显示红色，如果启用第二个，我们就会显示蓝色。

例如，我使用了这个：

默认启用

link rel="stylesheet" type="text/css" href="red.css"

默认禁用

link rel="stylesheet" type="text/css" href="blue.css" disabled

这两个链接都出现在同一页面中。

现在请告诉我解决方案如何使用主页中的单选按钮启用第二个和禁用第一个？以便用户可以根据自己的喜好进行选择。

我希望你能理解。

Answer 1

您只需在单选按钮onClick函数中使用javascript或jQuery即可完成此操作。您需要在相应的链接元素中添加/删除禁用的属性。

jQuery代码：

$('link[name="red_style_sheet"]').attr("disabled", "disabled");
$('link[name="blue_style_sheet"]').removeAttr("disabled", "disabled");

JavaScript代码：

document.getElementsByName("red_style_sheet").setAttribute("disabled", "disabled");
document.getElementsByName("blue_style_sheet").removeAttribute("disabled");

您不需要刷新页面。它应该自动工作。

Answer 2

您需要通过JavaScript动态添加它。以下是在页面加载后添加样式表的方法：

var link =  document.createElement("link")
link.setAttribute("rel", "stylesheet");
link.setAttribute("type", "text/css");
link.setAttribute("href", "color.css");
document.getElementsByTagName("head")[0].appendChild(link);