如何调用 lang="en" 到 javascript 的文档？

Question

我正在尝试通过调用在 head 和 body 标记之前找到的这一行来在 javascript 上创建条件样式：

<html class="js" lang="en">

如果 lang === "en" 将显示我隐藏的带有英文内容的图像，我需要创建一个条件。我还有 lang="de"，这是另一个隐藏了德语内容的图像。

两张图片都link编辑在<a>标签中，如果网站是英文的，点击后会显示英文图片，如果是德文，点击后会显示德语图片link 被点击。我有 link 模态，一旦点击就会弹出图像。

这是图片 html 代码：

<a>
    <p><img> English Image FAQs</p>
    <p><img> Deutsch Image FAQs</p>
</a>

希望我说的有道理。谢谢

Answer 1

看看这个，我想这就是你想要的：

const setLang = (lang)=> document.getElementsByTagName("html")[0].setAttribute("lang", lang);
setLang(navigator.language.slice(0,2))

.en, .de {
  display: none;
}
html[lang="en"] .en {
  display: block;
}

html[lang="de"] .de {
  display: block;
}

<a>
    <p class="en"><img src="https://via.placeholder.com/150?text=en"> English Image FAQs</p>
    <p class="de"><img src="https://via.placeholder.com/150?text=de"> Deutsch Image FAQs</p>
</a>

<a onclick="setLang('de')">de</a>
<a onclick="setLang('en')">en</a>

Answer 2

编辑：

CBroe 在评论中的建议更好，利用 :lang 选择器。

您不需要 javascript 来执行此操作，因为 css 就足够了。您可以对您的标记做一点更改，为两个不同的段落添加一个 class（或者可能是一个助手 class）：

<a>
    <p class="english-only"><img> English Image FAQs</p>
    <p class="deutsch-only"><img> Deutsch Image FAQs</p>
</a>

然后从 css 你可以说：

html:not([lang=en]) .english-only {
    display: none;
}

html:not([lang=de]) .deutsch-only {
    display: none;
}

如何调用 lang="en" 到 javascript 的文档？

How to call document with lang="en" to javascript?

html

javascript

shopify