How to obtain lang attribute in HTML using JavaScript?
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
Add a comment
|
3 Answers
If both attributes agree on their values (as they should), it's enough to read either of them. I'd suggest using
document.documentElement.lang
4 Comments
Kris Selbekk
Does this fetch the
xml:lang or the lang attribute?
Christoph
@KrisSelbekk: should be the
lang attribute, but I haven't done anything to verify this...
Jean-François Gagnon
This will not work with
xml:lang Ref : Dev mozilla
Flimm
Note that this won't retrieve the inherited
lang property.Just.
document.getElementsByTagName('html')[0].getAttribute('lang');
And with the namespace
document.getElementsByTagName('html')[0].getAttribute('xml:lang');
1 Comment
Juan Lanus
This will correctly return the lang of the html element of the document, that is inherited by the html node descendants. But, anywhere any element can have its own lang, perhaps different from its ancestors', and spread it downwards. In most cases there will be a single lang, albeit it's not sure.
If you would like to get the value of the lang attribute of an element, then you can simply access the lang property in JavaScript:
console.log(element.lang);
However, this won't retrieve the inherited lang value. For that, you will need to find the closest parent with a lang attribute yourself, like this.
function getLang(el) {
const closest = el.closest('*[lang]:not([lang=""])');
if (closest) {
return closest.lang;
}
}
for (const el of document.querySelectorAll("button")) {
el.addEventListener("click", () => {
alert(getLang(el));
});
}<div lang="en">
<button>First</button>
<div lang="fr">
<button>Second</button>
</div>
<button lang="it">Third</button>
</div>
<button>Fourth</button>
1 Comment
Peter
This is the only correct answer. Even if the page is set to one language, sections of it still can be in another language.