I have the word "Color" in a heading at the top of an html page. For users with a device set to British English, I want the text to change to "Colour". How can I achieve this? (with minimal Javascript if possible)
How can the set Device Language change a heading?
84 views Asked by Ernest At
2
There are 2 answers
0

Alex's answer is a start, but if you want to do this only on browsers that have en-GB for a default language, you will have to detect the language as follows:
if (navigator.language == 'en-GB') {
var h1 = document.body.getElementsByTagName('h1');
for (var i = 0; i < h1.length; ++i)
h1[i].innerHTML = h1[i].innerHTML.replace('Color', 'Colour');
}
<h1>Color Chart</h1>
If you give your heading an ID so it looks something like this:
you can do it like this: