如何用单按钮实现网站无障碍版切换？排查代码失效问题

现有代码的错误 #

1. body元素选择错误：document.querySelector("complex")缺少类选择器的.，正确写法应为document.querySelector(".complex")，或者直接用document.body更简洁。
2. CSS样式优先级不足：.add-accessibility的优先级低于.complex，导致添加类后样式无法生效，需调整为.complex.add-accessibility来覆盖原有样式。

修复后的基础实现（切换样式+修改文本） #

步骤1：调整CSS样式 #

.complex {
  /* 复杂版基础样式 */
  color: #fff;
  background-color: #333;
}

.complex.add-accessibility {
  color: #2b2c2c;
  background-color: #eae4dd;
}

步骤2：完整JavaScript实现 #

const accessibleBtn = document.querySelector(".accessible");
const body = document.body;
// 存储不同版本的文本内容，key为元素选择器，value对应两个版本的文本
const textVersions = {
  "#myLinks a:nth-child(1)": {
    complex: "Projects",
    plain: "我的项目"
  },
  "#myLinks a:nth-child(2)": {
    complex: "Skills",
    plain: "我的技能"
  },
  "#myLinks a:nth-child(3)": {
    complex: "About",
    plain: "关于我"
  },
  "#myLinks a:nth-child(4)": {
    complex: "Contact Me",
    plain: "联系我"
  }
};

accessibleBtn.addEventListener('click', () => {
  // 切换样式类
  body.classList.toggle('add-accessibility');
  
  const isPlainMode = body.classList.contains('add-accessibility');
  
  // 批量修改文本内容
  Object.keys(textVersions).forEach(selector => {
    const element = document.querySelector(selector);
    if (element) {
      element.innerText = isPlainMode ? textVersions[selector].plain : textVersions[selector].complex;
    }
  });
  
  // 切换按钮自身文本
  accessibleBtn.innerText = isPlainMode ? "Complex" : "Plain";
});

进阶方案：切换独立CSS文件 #

如果两个版本样式差异极大，可直接切换CSS文件：

HTML中引入主题CSS #

<link rel="stylesheet" id="theme-link" href="complex.css">

JavaScript实现切换逻辑 #

const accessibleBtn = document.querySelector(".accessible");
const themeLink = document.getElementById("theme-link");
const textVersions = { /* 同上的文本存储对象 */ };

accessibleBtn.addEventListener('click', () => {
  const isPlainMode = themeLink.href.includes('plain.css');
  // 切换CSS文件
  themeLink.href = isPlainMode ? "complex.css" : "plain.css";
  
  // 同步切换文本
  Object.keys(textVersions).forEach(selector => {
    const element = document.querySelector(selector);
    if (element) {
      element.innerText = isPlainMode ? textVersions[selector].complex : textVersions[selector].plain;
    }
  });
  
  accessibleBtn.innerText = isPlainMode ? "Plain" : "Complex";
});

补充说明 #

• 若需批量修改所有p、h1、h2元素，可使用document.querySelectorAll('p, h1, h2')遍历，结合预设的文本映射实现统一替换。
• classList.toggle方法可实现点击一次切换状态，比单独的add/remove更适合双向切换场景。

内容的提问来源于stack exchange，提问作者Sarah Heinz.