我正在开发一个非常简单的多语言静态网站，仅使用 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。
提前致谢。
最佳答案
这是另一种方法，类似于您最初的 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/)
关于javascript - 如何更改 :lang selector style with JavaScript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55444803/