如何使用JavaScript更改:lang选择器样式 [英] How to change a :lang selector style with JavaScript
问题描述
我正在开发一个非常简单的仅使用HTML5，CSS3和原始JavaScript的多语言静态网站.
I'm developing a very simple multilingual static website using only HTML5, CSS3 and vanilla (raw) JavaScript.
假设HTML看起来像这样:
Suppose HTML looks something like this:
<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上，我这样做:
I want english to be default language, so on my CSS I do:
header h1:not(:lang(en)), main article:not(:lang(en)) {
display: none;
}
当用户通过< select> 更改其显示语言首选项时，我有一个执行JS函数的 onChange =" 事件标记.我没有JS的丰富经验，我想知道是否有一种方法可以用一种适合用户所需语言的样式覆盖该样式.
When a user changes their display language preference through a <select> I have a onChange="" event tag that executes a JS function. I don't have much experience with JS, and I'm wondering if there's a way to overwrite that style with a similar one for the user's desired language.
请记住，为了使本网站尽可能简单，我有意避免使用任何JS框架和jQuery.
Please keep in mind that I'm purposefully avoiding any JS framework and jQuery for the sake of keeping this website as simple as possible.
谢谢.
推荐答案
这是另一种方法，类似于您最初的CSS方法.首先，我们添加一个全局/正文级别的 lang 属性，并以 en 作为我们的值(我们希望它为默认值).
Here's another approach, similar to your initial CSS approach. First we add a global/body-level lang attribute with en as our value (as we want it the default).
然后我们可以将CSS应用于:
We then can apply our CSS as:
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 )看起来像:
The inverse (or, :not, as you were asking) would look like:
body[lang=en] [lang]:not([lang=en]),
body[lang=fr] [lang]:not([lang=fr]) {
display: none;
}
然后在我们的选择处理程序中，我们只需修改主体级别的 lang 属性即可.如此简单:
Then in our select handler, we can just modify the body-level lang attribute. As simple as:
function langChange(el) {
document.body.setAttribute('lang', el.value);
}
以下是您可以测试的代码段:
Here's a snippet you can test with:
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预处理器输出选择器的方法:
(Here's an example of the :not usecase, as well as outputting the selectors with a CSS preprocessor: https://jsfiddle.net/o7vxskzL/)
这篇关于如何使用JavaScript更改:lang选择器样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
