Heim > Web-Frontend > CSS-Tutorial > 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
Freigeben: 2024-11-01 12:09:02
Original
526 Leute haben es durchsucht

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage