Mobirise Tutorials

Variablen für Inhalte

Content auf Seite über CSS oder JavaScript darstellen

Inhalt als CSS Class

Der rote Text kommt aus einer CSS-Class: 

Inhalt als JavaScript über ID

Hier steht in diesem Text der Inhalt einer JavaScript-Variable in blau:  Danach schreibe ich einfach weiter.

Inhalt als JavaScript über CSS-Class

Hier steht in diesem Text der Inhalt einer JavaScript-Variable in grün:  Danach schreibe ich einfach weiter.

Wenn ich eine Class verwende, kann ich die gleiche Variable mehrmals auf der gleichen Seite anwenden. Das geht natürlich nicht mit einer ID, da eine ID immer einmalig ist: 

Inhalt als JavaScript über querySelectorAll

Hier steht in diesem Text der Inhalt einer JavaScript-Variable in rot:  Danach schreibe ich einfach weiter.

Wenn ich eine Class verwende, kann ich die gleiche Variable mehrmals auf der gleichen Seite anwenden. Das geht natürlich nicht mit einer ID, da eine ID immer einmalig ist: 

Variablen als Texte anzeigen

Es besteht der Wunsch, Texte in einem Projekt, möglicherweise sogar auf mehreren Seiten, über Variablen ändern zu können. Dadurch müssen diese Texte nur zentral einmal geändert werden und nicht an vielen Stellen der Webseite.

Hierfür habe ich drei Beispiele erstellt, eines über CSS und zwei über JavaScript. 

Tutorial CSS Class

Hier habe ich beispielhaft eine CSS class="myGlobalClass" mit Inhalt (content) erstellt, die folgende Anweisungen enthält:

<!-- CSS Class with Content -->
<style>
  .myGlobalClass::after {
    content: "This text is a CSS Class.";
    display: inline-flex;
    color: red;
  }
</style>


Durch den Selektor ::after (danach) wird der Text immer an das Ende eines vorhandenen Absatzes geschrieben. Damit der Text aber überhaupt angezeigt wird, muss angegeben werden wo, also wie hier danach oder ::before (davor).

Diese Style-Anweisung gehört entweder in die "Globale HTML" der Site-Einstellungen oder in den Bereich "Inside <head> code:" der Seiten-Einstellungen.

Den Text ändert man dann an der CSS-Eigenschaft "content". Fügt die class="myGlobalClass" noch hinzu: 

<p class="mbr-text mbr-fonts-style myGlobalClass" data-app-selector=".mbr-text" mbr-theme-style="display-7">Der rote Text kommt aus einer CSS-Class: 
</p>

Tutorial JavaScript über ID

Eine wahrscheinlich sehr viel bessere Lösung ist die Darstellung des Textes über JavaScript.

Hierfür habe ich folgendes JavaScript erstellt, das auch entweder in die "Globale HTML" der Site-Einstellungen oder in den Bereich "End of <body> code" der Seiten-Einstellungen gehört.

<!-- JavaScript Content Variable via ID -->
<script>
  let name1 = "Germany";
  let name2 = "World";
  document.getElementById("myText").innerHTML = "Hello, " + name1 + " and the rest of the " + name2 + "!";
</script>


Die Texte ändert ihr an den "let" (Variablen). Ihr könnt natürlich Variablen hinzufügen oder entfernen. Innerhalb meines Textes im Mobirise-Block habe ich einem <span> Bereich </span> meine id="myText" gegeben, auf die sich das Skript bezieht.

<p class="mbr-text mbr-fonts-style" data-app-selector=".mbr-text" mbr-theme-style="display-7">
  Hier steht in diesem Text der Inhalt einer JavaScript-Variable in blau: <span id="myText"></span> Danach schreibe ich einfach weiter.

</p>

Tutorial JavaScript über CSS-Class

Eine weitere Lösung ist die Darstellung des Textes über JavaScript, jedoch diesmal als CSS-Class. Das hat den Vorteil, dass die gleiche Variable mehrmals auf der gleichen Seite angewendet werden kann. Eine ID darf dagegen immer nur einmalig auf der gleichen Seite Anwendung finden.

Hierfür habe ich folgendes JavaScript erstellt, das auch entweder in die "Globale HTML" der Site-Einstellungen oder in den Bereich "End of <body> code" der Seiten-Einstellungen gehört.

<!-- JavaScript Content Variable via Class -->
<script>
  let content1 = "Dieser Text kommt von zwei Variablen, ";
  let content2 = "die über einen Class-Namen dargestellt werden.";
  window.onload = function myFunction() {
  const list = document.getElementsByClassName("changeText");
  for (let i = 0; i < list.length; i++) {
    list[i].innerHTML = content1 + content2;
  }
}
</script>


Die Texte ändert ihr an den "let" (Variablen). Ihr könnt natürlich Variablen hinzufügen oder entfernen. Innerhalb meines Textes im Mobirise-Block habe ich einem <span> Bereich </span> meine class="changeText" gegeben, auf die sich das Skript bezieht.

<p class="mbr-text mbr-fonts-style" data-app-selector=".mbr-text" mbr-theme-style="display-7">
  Wenn ich eine Class verwende, kann ich die gleiche Variable mehrmals auf der gleichen Seite anwenden. Das geht natürlich nicht mit einer ID, da eine ID immer einmalig ist: <span class="changeText"></span>
</p>

Tutorial JavaScript über querySelectorAll

Eine weitere Lösung ist die Darstellung des Textes über JavaScript, jedoch hier mit der Methode "querySelectorAll()" und auch einer CSS-Class.

Vielen Dank für den Tipp von den Forum-Nutzern "Singa4real" und "Witsec".

Dieses Skript erscheint mir am besten geeignet zu sein. Die JavaScript Methode "querySelectorAll()" gibt alle Elemente zurück, die einem oder mehreren CSS-Selektoren entsprechen. In diesem Beispiel die class="myQuery"

Hierfür habe ich folgendes JavaScript erstellt, das auch entweder in die "Globale HTML" der Site-Einstellungen oder in den Bereich "End of <body> code" der Seiten-Einstellungen gehört.

<!-- JavaScript Content Variable via querySelectorAll method -->
<script>
  document.querySelectorAll('.myQuery').forEach(item => { item.innerHTML = "Your defined text here"; })
</script>


Die Text habe ich hier direkt in das Skript geschrieben. Innerhalb meines Textes im Mobirise-Block habe ich einem <span> Bereich </span> meine class="myQuery" gegeben, auf die sich das Skript bezieht.

<p class="mbr-text mbr-fonts-style" data-app-selector=".mbr-text" mbr-theme-style="display-7">
  Wenn ich eine Class verwende, kann ich die gleiche Variable mehrmals auf der gleichen Seite anwenden. Das geht natürlich nicht mit einer ID, da eine ID immer einmalig ist: <span class="myQuery"></span>
</p>

© Copyright Mobirise-Tutorials.com

Datenschutz und Impressum

Google Translator
Funktionale Cookies akzeptieren