Changing lang attribute of HTML page without reload

user_2426367 0
Viewed 674

In HTML structure we have 

<html lang="tr">

It is very useful when you need to transform text to upper/lowercase with different languages.

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

I'm working on a single page application, so I can't refresh the page.

But web application is multilingual so I need to change "lang" attribute of html tag without refreshing page.

I tried:

document.documentElement.lang = "en"

It doesn't affect text-transform: uppercase;. If I manually change the html lang attribute in HTML file and reload the page, it works fine.

How can I done this? Is there a way?

Thanks advance.

update: Some Stackoverflow users marked this is about ajax, php things. I'm sure sure this question never asked before. This question NOT about ajax and php.

html javascript
2 Answers

You can use Angularjs to change the language without reloading the page. For changing the language, you can use the angularjs $scope and change the language of HTML without reloading.

user_119955880

You can use setAttribute for changing or adding new attributes from elements;

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>

user_31674430
Related