使用JS切换样式表失效求助：代码问题排查与修复

让我帮你看看这个links()函数失效的问题，主要是两个关键错误导致的：

错误点分析 #

• 错误调用DOM方法：setAttribute是DOM元素的内置方法，你错误地使用了赋值运算符=，正确的做法是调用这个方法（用括号传递参数），而不是给它赋值。
• 缺少字符串引号：links.css没有被引号包裹，JavaScript会把它当作一个未定义的变量解析，而不是样式表文件路径，必须用双引号或单引号把文件名包起来。

修正后的代码 #

先把links()函数改成正确的写法：

function links() {
  document.getElementById("style").setAttribute("href", "links.css");
}

额外优化建议 #

为了让代码更简洁高效，还可以做以下优化：

1. 提前获取样式表元素，避免重复查询DOM：

// 全局定义，只查询一次DOM
const styleSheet = document.getElementById("style");

function home() {
  styleSheet.setAttribute("href", "css/index.css"); // 对应原HTML里的初始路径
}

function links() {
  styleSheet.setAttribute("href", "css/links.css"); // 注意路径：如果links.css也在css文件夹下，要加上前缀
}

function about() {
  styleSheet.setAttribute("href", "css/about.css");
}

function music() {
  styleSheet.setAttribute("href", "css/music.css");
}

function contact() {
  styleSheet.setAttribute("href", "css/contact.css");
}

2. 确认样式表路径：原HTML中初始样式表是css/index.css，如果其他样式表也放在css目录下，记得路径要和这个保持一致，否则浏览器会找不到文件。

内容的提问来源于stack exchange，提问作者Daburu