Heim > Artikel > Web-Frontend > Wie ändere ich die Seitensprache mit JavaScript?

Wie ändere ich die Seitensprache mit JavaScript?

WBOYnach vorne: 2023-09-15 14:53:101313Durchsuche

Wenn Sie eine Website oder App für ein globales Unternehmen entwickeln, müssen Sie sich auch auf die Sprache konzentrieren, die Ihr Publikum verstehen kann. Englisch ist beispielsweise eine internationale Sprache, aber in einigen Teilen der Welt können Menschen kein Englisch verstehen, weil sie Deutsch, Spanisch usw. sprechen.

Wenn Sie jedoch beobachten, bieten einige Websites die Möglichkeit, die Sprache der Website zu ändern. Sie können die Sprache Ihrer gesamten Website per Knopfdruck ändern. Haben Sie sich jemals gefragt, wie das möglich ist?

Hier lernen wir, wie man mit JavaScript die Sprache einer Webseite ändert.

Grammatik

Benutzer sollten die folgende Syntax befolgen, um JavaScript zum Ändern der Webseitensprache zu verwenden.

if (lang == "en") {
   element.innerHTML = "content";
} else if (lang == "fr") {
   element.innerHTML = "content";
} else if (lang == "de") {
   element.innerHTML = "content";
}

In der obigen Syntax haben wir if-else-Anweisungen geschrieben, um den Inhalt der Webseite entsprechend der ausgewählten Sprache zu ändern. Benutzer müssen Inhalte durch Inhalte in einer bestimmten Sprache ersetzen.

Beispiel 1

Im folgenden Beispiel haben wir einige div-Elementinhalte hinzugefügt. Immer wenn der Benutzer eine beliebige Taste drückt, um die Sprache der Webseite zu ändern, rufen wir die Funktion „changeLanguage()“ auf, indem wir die Sprache als Parameter übergeben. In der Funktion changeLanguage() greifen wir auf das div-Element zu und ändern dessen Inhalt entsprechend der ausgewählten Sprache.

<html>
<body>
   <h2>Switching the language of web page using JavaScript</h2>
   <div id = "div">Hi How are you! This is written in English.</div><br>
   <div id = "languageSwitcher">
      <button onclick = "changeLanguage('en')"> English </button>
      <button onclick = "changeLanguage('fr')"> French </button>
      <button onclick = "changeLanguage('de')"> German </button>
   </div>
   <script>
      // function to switch language of web page
      function changeLanguage(lang) {
         let element = document.getElementById("div");
         if (lang == "en") {
            element.innerHTML = "Hi How are you! This is written in English.";
         } else if (lang == "fr") {
            element.innerHTML = "Bonjour Comment allez-vous! Cela est écrit en français.";
         } else if (lang == "de") {
            element.innerHTML = "Hallo Wie geht es dir! Das ist auf Deutsch geschrieben.";
         }
      }
   </script>
</body>
</html>

Beispiel 2

Im folgenden Beispiel haben wir eine Webseite mit mehreren Elementen erstellt. Zusätzlich haben wir jedem Element eine eindeutige ID gegeben. In JavaScript erstellen wir ein Objekt namens „LanguageContent“. Im Objekt speichern wir die Sprache als Schlüssel und den Inhalt als Wert. Im Inhaltsobjekt verwenden wir die Element-ID als Schlüssel und seinen sprachspezifischen Inhalt als Wert.

In der Funktion switchLang() greifen wir über das Objekt languageContent auf den sprachspezifischen Inhalt zu und ersetzen den Inhalt aller Elemente auf der Webseite.

<html>
<body>
   <h2>Switching the language of web page using JavaScript</h2>
   <div id = "text1"> This is a sample content </div>
   <div id = "language"> English </div>
   <div id = "BrandName"> TutorialsPoint </div>
   <div id = "Programming_lang"> JavaScript </div>
   <div id = "languageSwitcher">
      <button onclick = "swithcLang('en')"> English </button>
      <button onclick = "swithcLang('fr')"> French </button>
      <button onclick = "swithcLang('es')"> German </button>
   </div>
   <script>
      let languageContent = {
         "en": {
            "text1": "This is a sample content",
            "language": "English",
            "BrandName": "TutorialsPoint",
            "Programming_lang": "JavaScript",
         },
         "fr": {
            "text1": "Ceci est un contenu d'exemple",
            "language": "Français",
            "BrandName": "TutorialsPoint",
            "Programming_lang": "JavaScript",
         },
         "es": {
            "text1": "Este es un contenido de ejemplo",
            "language": "Español",
            "BrandName": "TutorialsPoint",
            "Programming_lang": "JavaScript",
         }
      }
      function swithcLang(lang) {
         for (let key in languageContent[lang]) {
            document.getElementById(key).innerHTML = languageContent[lang][key];
         }
      }
   </script>
</body>
</html>

Benutzer haben gelernt, JavaScript zum Wechseln der Webseitensprachen zu verwenden. Im ersten Beispiel demonstrieren wir, wie man zwischen mehreren Sprachen wechselt.

Wir können das zweite Beispiel für eine Live-Website verwenden. Entwickler müssen eine JSON-Datei erstellen, um den Inhalt zu speichern, und nicht in derselben Datei, da Echtzeitanwendungen möglicherweise große Mengen an Inhalten enthalten. Anschließend können sie eine for-Schleife verwenden, um alle Elemente der JSON-Datei zu durchlaufen und den Inhalt der Webseite zu aktualisieren.

Das obige ist der detaillierte Inhalt vonWie ändere ich die Seitensprache mit JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript json if for 循环对象

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：10 lustige Dinge, die Sie mit nur wenigen Zeilen JavaScript machen könnenNächster Artikel：10 lustige Dinge, die Sie mit nur wenigen Zeilen JavaScript machen können

In Verbindung stehende Artikel

Mehr sehen