Wie verwende ich CSS, um Großbuchstaben in Titelbuchstaben umzuwandeln?

Wie Verwende Ich Css Um Grossbuchstaben In Titelbuchstaben Umzuwandeln



Der ' Großbuchstaben „ da sein Name alle Zeichen des Zieltextes auf das Großbuchstabenformat setzt und das „ Titel Fall „schreibt den Anfangsbuchstaben jedes Wortes im Zieltext groß. Es wird hauptsächlich zum Formatieren von Überschriften, Unterüberschriften und Titeln auf Webseiten verwendet. Benutzer können auch verwendet werden, um die Lesbarkeit von Menüpunkten oder Produktlisten zu verbessern. Es verbessert auch das allgemeine Erscheinungsbild und die Wiedererkennung der Webseite.

In diesem Artikel wird Schritt für Schritt die Vorgehensweise zum Konvertieren von Großbuchstaben in Titelbuchstaben beschrieben.

Wie konvertiere ich Großbuchstaben in Titelbuchstaben?

Mit Hilfe von CSS-Eigenschaften und JavaScript kann der Großbuchstabentext in eine Titelschrift umgewandelt werden. Diese Konvertierung trägt zur Verbesserung der Lesbarkeit und des Erscheinungsbilds des Textes bei. Außerdem bietet es eine konsistente Formatierung und verbessert die Benutzererfahrung.







Befolgen Sie die folgende Schritt-für-Schritt-Anleitung für die Konvertierung von Groß- in Großschreibung:



Schritt 1: Erstellen Sie ein Zielelement
Erstellen Sie in diesem ersten Schritt ein gezieltes/ausgewähltes Element innerhalb der „ ”-Tag, das in die Groß-/Kleinschreibung des Titels umgewandelt wird. Zum Beispiel das „ P „Elementedaten sind gezielt:



< Center >
< P Ausweis = 'Konverter' > DIESER TEXT WIRD MIT CSS VON GROSSBUCHSTABEN IN TITELBUCHSTABEN KONVERTIERT < / P >
< Center >

Im obigen Codeblock:





  • Verwenden Sie zunächst ein „

    ”-Tag, um Text in der Mitte der Webseite innerhalb des „ ' Schild. Geben Sie außerdem Dummy-Daten im Großbuchstabenformat an.

  • Als nächstes fügen Sie ein „ Ausweis Attribut und geben Sie ihm den Wert „ Konverter “. Das ' Ausweis „wird verwendet, um die Referenz des

    -Tags innerhalb des JavaScript-Tags zu speichern.

Nach Abschluss der Kompilierungsphase:



Der obige Schnappschuss der Webseite zeigt, dass der Text erfolgreich angezeigt wurde.

Schritt 2: Großbuchstaben in Großbuchstaben umwandeln
Um einen Konverter zu erstellen, werden die JavaScript-Eigenschaften und -Methoden verwendet. Folgen Sie dem folgenden Code, dessen Beschreibung unten angegeben ist:

< Skript >
War Ziel = document.getElementById ( 'Konverter' ) .textContent.toLowerCase ( ) ;
Ziel = Ziel .ersetzen ( / \b\w / G,
Funktion ( untere ) { Geben Sie Lower.toUpperCase zurück ( ) ; } ) ;
document.getElementById ( 'Konverter' ) .Textinhalt = Ziel ;
< / Skript >

Im obigen Codeausschnitt:

  • Erstellen Sie zunächst eine Variable mit dem Namen „ Ziel ” innerhalb der „ ' Schild.
  • Als nächstes verwenden Sie die „ Textinhalt ”-Eigenschaft zum Auswählen nur von Text unter Berücksichtigung von Leerzeichen und anderen Tags. Der ' toLowerCase() Die Funktion hat die ID „Konverter“, die einen Wert in der Variablen „Ziel“ speichert.
  • Dann ist die ' ersetzen() Die „Methode“ wird zum Ändern des Werts der „Ziel“-Variablen verwendet. Es wählt das erste Zeichen jedes Wortes mit der „ \b\w ”-Ausdruck und verwendet dann den „ toUpperCase() ” Funktion. Es ändert das Textformat in Großbuchstaben.
  • Am Ende wird der neue Wert der „Ziel“-Variablen mit der ID „“ auf dem Bildschirm angezeigt. Konverter “.

Nach der Ausführung des Code-Snippets:

Die Ausgabe zeigt, dass der Großbuchstabentext in das Titelformat umgewandelt wurde.

Abschluss

Um Großbuchstaben in Titelbuchstaben umzuwandeln, verwenden Sie „ toLowerCase() ”-Funktion für das ausgewählte Element. Nutzen Sie danach die Funktion „ ersetzen() ”-Funktion zum Auswählen des ersten Zeichens jedes Wortes mithilfe der Funktion „ \b\w ' Ausdruck. Am Ende wird das ausgewählte Zeichen mit dem Befehl „ in Großbuchstaben umgewandelt. toUpperCase() ” Funktion. In diesem Artikel wurde das Verfahren zum Konvertieren des Großbuchstabentexts der ausgewählten Elemente in die Titelschrift demonstriert.