如何动态设置 HTML lang 属性？答案

【问题标题】：How to set HTML lang attribute dynamically?如何动态设置 HTML lang 属性？
【发布时间】：2016-05-13 06:36:37
【问题描述】：

如何在 Web 应用程序中动态设置 HTML 'lang' 属性？

我尝试如下使用 jQuery 插入 'lang' 属性：

$(document).ready(function() {
     $("html").attr("lang", language); //'language' value is retrieved from a cookie
});

使用控制台/警报，'lang' 属性看起来按预期设置。但是，如果您看到生成的源代码（查看源代码），则根本没有设置“lang”。

要求屏幕阅读器必须能够动态识别语言。如果有任何其他解决方案可以让屏幕阅读器动态识别语言，那就太好了。感谢大家的 cmets inline！

【问题讨论】：

是的……你可以检查一下：$("html").attr("lang", language); alert($("html").attr("lang")):
纯js方式：document.documentElement.setAttribute('lang','test');alert(document.documentElement.getAttribute('lang'));
如果您看到 DOM 结构（使用 'view source'），'lang' 没有被注入。
@Xplora...这不是它应该如何工作...请记住，您正在以编程方式更改 DOM...当您通过 View Source 查看源代码时，您会看到原始 html结构:)
使用谷歌浏览器的检查功能，你会看到它

【解决方案1】：

document.documentElement.setAttribute('lang', navigator.language);

或

document.documentElement.lang = navigator.language;

【讨论】：

【解决方案2】：

但如果您看到生成的源代码（查看源代码），则根本没有设置“lang”。

查看源代码不会向您显示生成的源代码。它向您展示了真正的来源。如果要更改它，则需要先在服务器上更改它，然后再将其传送到浏览器。您无法使用客户端 JavaScript 对其进行修改。

您的 DOM 更改将显示在实时 DOM 中，通过 Inspect Element 可见。

【讨论】：

【解决方案3】：

还不能评论。

我尝试了 sn-p，它对我有用。当然，我添加了一个字符串值而不是您的“语言”变量。

不要忘记在顶部菜单中导入 jQuery 以便它在 sn-p 中工作。

【讨论】：