Heim  >  Artikel  >  Web-Frontend  >  Wie kann ich Text mithilfe von CSS und JavaScript klein schreiben und dann groß schreiben?

Wie kann ich Text mithilfe von CSS und JavaScript klein schreiben und dann groß schreiben?

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-11-01 12:09:02441Durchsuche

How can I lowercase and then capitalize text using CSS and JavaScript?

Großschreibung von Text nach der Kleinschreibung mit CSS und JavaScript

Es ist möglich, Text zuerst klein zu schreiben und dann mit CSS oder JavaScript groß zu schreiben.

CSS-Methode

CSS kann verwendet werden, um den ersten Buchstaben jedes Wortes mithilfe der Eigenschaft text-transform groß zu schreiben. Durch die Einstellung text-transform:capitalize; wird der Text automatisch zuerst in Kleinbuchstaben umgewandelt, dann wird der erste Buchstabe jedes Wortes großgeschrieben.

Beispiel:

<code class="css">.className {
    text-transform: capitalize;
}</code>

Dieses CSS stellt sicher, dass der gesamte Text innerhalb des Elements mit der Klasse className zuerst in Kleinbuchstaben und dann in Großbuchstaben geschrieben wird.

JavaScript-Methode

JavaScript bietet einen flexibleren Ansatz Großschreibung von Text nach Kleinschreibung. Die toLowerCase()-Methode kann verwendet werden, um den gesamten Text in Kleinbuchstaben umzuwandeln, gefolgt von der replace()-Methode, um den ersten Buchstaben jedes Wortes groß zu schreiben.

Beispiel:

<code class="js">function capitalize(s){
    return s.toLowerCase().replace( /\b./g, function(a){ return a.toUpperCase(); } );
};

capitalize('this IS THE wOrst string eVeR');</code>

In diesem Beispiel konvertiert die Funktion „capitalize()“ zunächst die Eingabezeichenfolge s mithilfe von toLowerCase() in Kleinbuchstaben. Anschließend wird die Methode replace() mit einem regulären Ausdrucksmuster (/b./g) verwendet, um den ersten Buchstaben jedes Wortes zu finden (angezeigt durch die Wortgrenzen b), und die anonyme Rückruffunktion function(a){ gibt a zurück. toUpperCase(); }, schreibt den übereinstimmenden Buchstaben groß.

Das obige ist der detaillierte Inhalt vonWie kann ich Text mithilfe von CSS und JavaScript klein schreiben und dann groß schreiben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn