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

joaop 发表于 Dev

乔普

我正在开发仅使用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>I更改其显示语言首选项时，我会有一个onChange=""执行JS函数的事件标签。我没有JS的丰富经验，我想知道是否有一种方法可以用一种适合用户所需语言的样式覆盖该样式。

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

提前致谢。

插口

这是另一种方法，类似于您最初的CSS方法。首先，我们添加一个global / body-levellang属性，并将其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;
}

然后，在我们的选择处理程序中，我们可以修改body-levellang属性。就像：

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/）

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。