在不重新加载的情况下更改 HTML 页面的 lang 属性答案

【问题标题】：Changing lang attribute of HTML page without reload在不重新加载的情况下更改 HTML 页面的 lang 属性
【发布时间】：2020-07-18 13:24:30
【问题描述】：

在 HTML 结构中我们有

<html lang="tr">

当您需要将文本转换为不同语言的大写/小写时非常有用。

<div style="text-transform: uppercase;" id="asd">iğüşçıâ</div>

我正在开发单页应用程序，因此无法刷新页面。

但是网络应用程序是多语言的，所以我需要在不刷新页面的情况下更改 html 标签的“lang”属性。

我试过了：

document.documentElement.lang = "en"

不影响 text-transform: uppercase;。如果我手动更改 HTML 文件中的 html lang 属性并重新加载页面，它工作正常。

我该怎么做？有什么办法吗？

提前感谢。

更新： 一些 Stackoverflow 用户标明这是关于 ajax、php 的东西。我敢肯定这个问题以前从未问过。这个问题NOT关于 ajax 和 php。

【问题讨论】：

为什么你认为它会影响text-transform？您使用了样式属性，因此它总是苹果。没有基于语言的条件。
这能回答你的问题吗？ using ajax for change website language
<html> 中的 lang 不会翻译你的页面，它只对搜索引擎有用，它只是告诉他们你的页面是什么语言
@midrizi 感谢您的回答，但我并不是说要翻译。我将“转换”写成大写或小写。 “文本转换：大写；”从 html lang 属性中获取文化的功能。
@Quentin "文本转换：大写；"从 html lang 属性中获取文化的功能。请仔细检查。或者你可以实验室它。

标签： javascript html

【解决方案1】：

您可以使用 setAttribute 更改或添加元素的新属性；

document.documentElement.setAttribute("lang","tr")

function changeLangTr() {
	document.documentElement.setAttribute("lang","tr")
	getText()
}
function changeLangEn() {
	document.documentElement.setAttribute("lang","en")
	getText()
}

function getText() {
	var node = document.getElementById('text')
}

p {
	margin-top: 30px;
	font-size: 20px;
  text-transform: uppercase;
}
p.upper {
	text-transform: uppercase;
}
p#info {
	font-size: 12px;
	color: red;
	margin-top: 0;
}

<html name="html" lang="tr">
	<body>
		<div id="home">
			<button onclick='changeLangTr()'>
				Change Language TR
			</button>
			<button onclick='changeLangEn()'>
				Change Language EN
			</button>
			<p id="text">
				Türkçe Karakterlerin Kullanımı (iğüşçıâ)
			</p>
			
			<strong>Now:</strong>
			<p id="info">
				Turkish Lowercase
			</p>
		</div>
	</body>
</html>

【讨论】：

除非重新渲染 CSS codepen.io/Nagibaba/pen/ZEBPbQP 否则无效

【解决方案2】：

您可以使用 Angularjs 更改语言而无需重新加载页面。要更改语言，您可以使用 angularjs $scope 并更改 HTML 的语言而无需重新加载。

【讨论】：

Web 应用是 vanilla js。