多语言切换 引入不同的css

实现多语言切换可以通过以下步骤：

1. 在 HTML 中定义不同语言的文本内容，并为每个语言设置一个唯一的标识符。
2. 在 JavaScript 中编写代码来检测用户选择的语言，并根据其选择动态加载对应的语言文件。
3. 对于每种语言，可以创建不同的 CSS 文件，以便在用户切换到该语言时加载正确的样式。
4. 在 JavaScript 中编写代码来动态更改页面元素的语言和样式。

以下是一个简单的示例：

HTML：

<div id="text">Hello World!</div>

<button onclick="switchLanguage('en')">English</button>
<button onclick="switchLanguage('fr')">French</button>

JavaScript：

function switchLanguage(lang) {
  // 根据语言代码动态加载对应的语言文件
  var script = document.createElement('script');
  script.src = lang + '.js';
  document.head.appendChild(script);

  // 根据语言代码动态加载对应的 CSS 文件
  var link = document.createElement('link');
  link.href = lang + '.css';
  link.rel = 'stylesheet';
  document.head.appendChild(link);

  // 动态更改页面元素的语言和样式
  var text = document.getElementById('text');
  if (lang == 'en') {
    text.textContent = 'Hello World!';
    text.className = 'english';
  } else if (lang == 'fr') {
    text.textContent = 'Bonjour le monde!';
    text.className = 'french';
  }
}

CSS：

.english {
  color: blue;
}

.french {
  color: red;
}

在这个示例中，我们通过调用 `switchLanguage` 函数来切换页面的语言。该函数会动态加载对应的语言文件和 CSS 文件，并根据语言代码更改页面元素的语言和样式。在这个示例中，我们只使用了两种语言（英语和法语），但你可以根据需要添加更多的语言。