Set attributes of <html> tag using pure JavaScript

Question

I want to set two attributes to the <html> tag which are:

dir: rtl
lang: ar

I've tried:

    document.documentElement.outerHTML.setAttribute("dir", "rtl");
    document.documentElement.outerHTML.setAttribute("lang", "ar");

And:

    document.setAttribute("dir", "rtl");
    document.setAttribute("lang", "ar");

But none of the two worked.

I want to do that because I'm doing a multi-languages (Arabic and English) system for my website using JavaScript.. So I want to set those two attributes incase the language selected was Arabic.

Davi · Accepted Answer · 2019-01-28 15:17:22Z

13

Remove that "outerHTML" stuff from your first example:

document.documentElement.setAttribute("dir", "rtl");
document.documentElement.setAttribute("lang", "ar");

Or even shorter:

document.documentElement.dir = "rtl";
document.documentElement.lang = "ar";

answered Jan 28, 2019 at 15:17

Davi

4,2941 gold badge18 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

connexo · Accepted Answer · 2019-01-28 15:26:51Z

3

Why not just use querySelector?

const html = document.querySelector('html')
html.setAttribute("dir", "rtl");
html.setAttribute("lang", "ar");

edited Jan 28, 2019 at 15:26

answered Jan 28, 2019 at 15:17

connexo

57.2k15 gold badges112 silver badges149 bronze badges

1 Comment

connexo Over a year ago

@Nisarg Thanks for finding that. Corrected.

FZs · Accepted Answer · 2019-01-30 18:55:30Z

3

Simply remove outerHTML from your first example. document.documentElement refers to the <html> element:

console.log(document.documentElement) //before setting attributes

document.documentElement.setAttribute("dir", "rtl");
document.documentElement.setAttribute("lang", "ar");

console.log(document.documentElement) //after setting attributes

<html></html>

edited Jan 30, 2019 at 18:55

answered Jan 28, 2019 at 15:18

FZs

18.8k13 gold badges47 silver badges56 bronze badges

Collectives™ on Stack Overflow

Set attributes of <html> tag using pure JavaScript

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related