Скрипт для показа разных логотипов в зависимости от языка сайта

Сегодня разберем пример решения задачи для многоязычного сайта, на котором используются разные варианты логотипа в зависимости от текущего языка для содержимого страницы (русский, английский и т п).

В данном решении использован нативный (чистый) Java Script без зависимостей.

Описание работы скрипта

В этой программе, мы используем метод getElementById для получения элемента img с id «logo-img». Затем, мы используем document.documentElement.lang для получения текущего языка HTML-страницы, и используем условную конструкцию if-else для задания источника изображения в зависимости от языка. Если язык не соответствует ни одному из условий, изображение по умолчанию будет использовано.

Важно заметить, что в данном коде используются изображения с именами «logo-en.png», «logo-fr.png», «logo-es.png» и «logo-default.png» и они должны находится в том же каталоге что и страница html

Сам скрипт

var logoImg = document.getElementById("logo-img");
var currentLang = document.documentElement.lang;

if (currentLang === "en") {
  logoImg.src = "logo-en.png";
} else if (currentLang === "fr") {
  logoImg.src = "logo-fr.png";
} else if (currentLang === "es") {
  logoImg.src = "logo-es.png";
} else {
  logoImg.src = "logo-default.png";
}

Как работает .lang в Javascript

.lang это свойство элемента document, которое представляет язык содержимого текущей HTML-страницы. Это свойство определяется с помощью атрибута lang элемента html в документе.

Например, если язык содержимого HTML-страницы установлен как «en», то свойство document.documentElement.lang будет равно «en».

<html lang="en">
  <head>
    ...
  </head>
  <body>
    ...
  </body>
</html>
console.log(document.documentElement.lang); // "en"

Это свойство может использоваться для реализации локализации и адаптации содержимого страницы — картинок, текстовых блоков и целых смысловых секций.

Юрий Ронин