Question

我正在开发一个非常简单的仅使用HTML5，CSS3和原始JavaScript的多语言静态网站。

假设HTML看起来像这样：

<html>
  <head>
    <title>WEBSITE</title>
  </head>
  <body>
    <header>
      <h1 lang="en">ENGLISH HEADER</h1>
      <h1 lang="fr">FRENCH HEADER</h1>
      ...
    </header>
    <main>
      <article lang="en"><p>...</p></article>
      <article lang="fr"><p>...</p></article>
      ...
    </main>
  </body>
</html>

我希望英语成为默认语言，所以在我的CSS上，我这样做：

header h1:not(:lang(en)), main article:not(:lang(en)) {
  display: none;
}

当用户通过<select>更改其显示语言首选项时，我有一个onChange=""事件标记，该事件标记执行JS函数。我没有JS的丰富经验，我想知道是否有一种方法可以用一种适合用户所需语言的样式覆盖该样式。

请记住，为了使该网站尽可能简单，我有意避免使用任何JS框架和jQuery。

谢谢。

Answer 1

这是另一种方法，类似于您最初的CSS方法。首先，我们添加一个全局/主体级别的lang属性，并以en作为我们的值（我们希望使用默认值）。

然后我们可以将CSS应用于：

body[lang="en"] [lang="fr"], // if <body lang=en>, hide all lang=fr
body[lang="fr"] [lang="en"]{ // if <body lang=fr>, hide all lang=en
    display: none;
}

反数（或您所问的:not）看起来像：

body[lang=en] [lang]:not([lang=en]),
body[lang=fr] [lang]:not([lang=fr]) {
    display: none;
}

然后在我们的选择处理程序中，我们只需修改主体级别的lang属性即可。如此简单：

function langChange(el) {
  document.body.setAttribute('lang', el.value);
}

以下是您可以测试的代码段：

function langChange(el) {
  document.body.setAttribute('lang', el.value);
}

body[lang="en"] [lang="fr"],
body[lang="fr"] [lang="en"]{
  display: none;
}

<body lang="en">
  <header>
    <h1 lang="en">ENGLISH HEADER</h1>
    <h1 lang="fr">FRENCH HEADER</h1>
    ...
  </header>
  <main>
    <article lang="en">
      <p>English Paragraph</p>
    </article>
    <article lang="fr">
      <p>French Paragraph</p>
    </article>
    ...
  </main>
  <select onChange="langChange(this)">
    <option selected value="en">English</option>
    <option value="fr">French</option>
  </select>
</body>

（这是:not用例的示例，以及使用CSS预处理器输出选择器的示例：https://jsfiddle.net/o7vxskzL/）

Answer 2

我相信我找到了一种方法，我不知道这是否是最好的方法，但是它有效。

基本上，我要做的是选择所有带有langX的非document.querySelectorAll("tag:not(lang(langX))")元素，并使每个元素都不可见，之后，使所有langX元素同样可见。

事实证明这很简单。

如何使用JavaScript更改：lang选择器样式

2 个答案: