如何用JavaScript实现可覆盖全局CSS的语言选择器

需求背景 #

我需要实现一个基于CSS的多语言切换功能，现有包含英、德、法三种语言内容的静态HTML页面：

<h1 lang="en">Hello World</h1>
<h2 lang="de">Hallo Welt</h2>
<h2 lang="fr">Bonjour la Monde</h2>
...
<p lang="en">This is my english webpage...</p>
<p lang="de">Dies ist meine deutsche Webseite...</p>
<p lang="fr">Je ne parles pas francais</p>

页面加载时，通过navigator.language || navigator.userLanguage检测用户语言，默认仅显示对应语言内容（比如默认显示英文），隐藏其他语言：

*[lang=en] { display: block; }
*[lang=de] { display: none; }
*[lang=fr] { display: none; }

当用户手动切换语言时，通过JavaScript全局覆盖CSS规则，实现对应语言内容的显示/隐藏切换，要求：

• 不直接操作HTML元素的display属性，仅通过全局CSS覆盖实现
• 切换触发方式为onclick或onchange事件
• 支持在none和元素原有display属性（如inline）之间切换，而非统一设为block

实现方案 #

方法一：动态生成内联样式表 #

通过JavaScript动态创建/修改<style>标签的内容，实现全局CSS规则的覆盖：

1. 初始化与核心切换函数

// 检测用户语言，提取前两位（如'en-US'取'en'）
const userLang = (navigator.language || navigator.userLanguage).slice(0, 2);
// 校验语言合法性，默认设为英文
const defaultLang = ['en', 'de', 'fr'].includes(userLang) ? userLang : 'en';

// 创建全局样式表元素并挂载到页面头部
const styleEl = document.createElement('style');
styleEl.id = 'lang-switch-style';
document.head.appendChild(styleEl);

// 语言切换核心函数
function switchLanguage(targetLang) {
  // 生成CSS规则：先隐藏所有带lang属性的元素，再恢复目标语言元素的默认display
  const cssRules = `
    *[lang] { display: none; }
    *[lang=${targetLang}] { display: revert; }
  `;
  // 替换样式表内容
  styleEl.textContent = cssRules;
}

// 页面加载时应用默认语言
switchLanguage(defaultLang);

2. 绑定切换事件

给语言选择控件绑定触发事件，比如按钮：

<button onclick="switchLanguage('en')">English</button>
<button onclick="switchLanguage('de')">Deutsch</button>
<button onclick="switchLanguage('fr')">Français</button>

方法二：预定义样式表，切换激活状态 #

提前写好所有语言的CSS规则，通过切换样式表的disabled属性来激活对应规则：

1. 预定义多语言样式表

在HTML头部添加三个样式表，默认全部禁用，初始化时激活默认语言：

<style id="lang-en" disabled>
  *[lang] { display: none; }
  *[lang=en] { display: revert; }
</style>
<style id="lang-de" disabled>
  *[lang] { display: none; }
  *[lang=de] { display: revert; }
</style>
<style id="lang-fr" disabled>
  *[lang] { display: none; }
  *[lang=fr] { display: revert; }
</style>

2. 切换样式表激活状态

function switchLanguage(targetLang) {
  // 禁用所有语言样式表
  document.querySelectorAll('[id^="lang-"]').forEach(el => {
    el.disabled = true;
  });
  // 激活目标语言的样式表
  document.getElementById(`lang-${targetLang}`).disabled = false;
}

// 初始化默认语言
const userLang = (navigator.language || navigator.userLanguage).slice(0, 2);
const defaultLang = ['en', 'de', 'fr'].includes(userLang) ? userLang : 'en';
switchLanguage(defaultLang);

关键细节说明 #

• 使用*[lang]统一隐藏所有多语言元素，再单独显示目标语言，比逐个设置其他语言为none更简洁高效
• display: revert是CSS3属性，可让元素恢复浏览器默认的display值（比如<h1>默认block，<span>默认inline），完美满足保留原有布局的需求
• 若需兼容旧浏览器（不支持revert），可提前缓存元素默认display值，但这种方式会直接操作元素style属性，不符合“不直接操作元素display”的要求，仅作兼容参考：

  // 提前缓存元素默认display
  const defaultDisplays = new Map();
  document.querySelectorAll('[lang]').forEach(el => {
    defaultDisplays.set(el, window.getComputedStyle(el).display);
  });
  
  // 切换时使用缓存值
  function switchLanguage(targetLang) {
    document.querySelectorAll('[lang]').forEach(el => {
      el.style.display = el.lang === targetLang ? defaultDisplays.get(el) : 'none';
    });
  }
  

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