所以我有一个单独的页面，用户可以在其中单击一个按钮来更改网站的样式表，这会将每个页面的所有样式表更改为他们选择的样式表。
外部Javascript文件：
function ChangeSheet(sheet)
{
document.getElementById('pagestyle').setAttribute('href', sheet);
}
pages = {
default : 0;
design1 : 0;
design2 : 0;
}
function setDefault(var num){
pages.default = num;
}
当用户单击按钮更改 css 时的 HTML 代码：
<p>Click one of the links to change the website design viewing settings.</p>
<button onclick="setDefault(1)">Default</button>
数字 1 保存在 pages 类中，这意味着用户选择了这个。 基本上是一个布尔值。
在html文件中嵌入Javascript，这显示了链接ID，以及导入外部javascript文件。然后我尝试使用 internel js 来检查 pages.deafult 是否为 1，如果是，那么我们更改为样式表 'design1.css'：
<link id = "pagestyle" rel="stylesheet" type="text/css" href="default.css">
<script src= "swap.js"></script>
<script type="text/javascript">
if(pages.default == 1)
{
ChangeSheet('design1.css');
}
</script>
但是当我按下按钮时，没有任何反应，我不知道为什么？对不起，如果我不应该问这个，我对网站设计和javascript很陌生。
也许，与其更改link标签的属性，不如简单地将特定类设置为body标签，以便 CSS 根据它应用更改？
你的CSS主题有多大？无论如何，我不认为让 CSS 主题添加额外的 5-10KB 最大缩小的 CSS 是一种不好的做法。
通过修改body类名，您不必求助于上述看起来很笨拙的解决方案。
如果您必须使用外部文件，它将被包含在服务器上的文档中，因为将其发送到客户端，因此在页面再次加载之前它不会更改 在客户端更改样式的最佳方法是在 JavaScript 函数本身中更改值或尝试重新加载页面。
问题是您的嵌入式脚本将在页面加载时立即执行(甚至在页面加载之前，因为看起来好像您将其放置在文档的<head>中)。而且由于那时pages.default不等于1，因此什么都不会发生。要解决此问题，您只需更新单击处理程序以调用ChangeSheet：
<button onclick="ChangeSheet('design1.css')">Default</button>
编辑：我看到你的更新。正如评论中提到的其他用户，您将需要使用某种持久性机制来存储用户的首选样式表。但是，如果您按照YouTube视频中的教程进行操作，那么您可能正在从本地文件系统(file:///协议)运行HTML和JavaScript，因此您可能无法使用cookie或localStorage并且您没有服务器来存储用户的偏好。持久性选项非常有限，但可以使用window.name属性来持久保存某些数据(请参阅文件协议 (file://) 下的 Javascript/HTML 存储选项)。这不是最好的解决方案(这是一种黑客攻击)，但它可能是唯一适用于您的示例的解决方案。
HTML(和嵌入式 JS)：
<!doctype html>
<html>
<head>
<link id = "pagestyle" rel="stylesheet" type="text/css" href="default.css">
<script src="./swap.js"></script>
<script type="text/javascript">
if (window.name) {
ChangeSheet(window.name);
}
</script>
</head>
<body>
<button onclick="ChangeSheet('design1.css')">Design 1</button>
<button onclick="ChangeSheet('design2.css')">Design 2</button>
</body>
</html>
交换.js：
function ChangeSheet(sheet)
{
window.name = sheet;
document.getElementById('pagestyle').setAttribute('href', sheet);
}
设计1.css(当然你可以改成任何你想要的风格)：
body {
background-color: blue;
}
design2.css(当然你可以改成任何你想要的样式)：
body {
background-color: red;
}
设置其中一个样式后，尝试刷新页面，并注意到您的样式首选项仍然存在，或者如果您有其他页面要加载，您可以尝试在它们之间来回导航。