Bagaimana Menggunakan CSS untuk Menukar Teks Huruf Besar kepada Huruf Tajuk?

Bagaimana Menggunakan Css Untuk Menukar Teks Huruf Besar Kepada Huruf Tajuk



' huruf besar ” sebagai namanya menetapkan semua aksara teks yang disasarkan kepada format huruf besar dan “ kes tajuk ” menggunakan huruf besar huruf permulaan bagi setiap perkataan dalam teks yang disasarkan. Ia kebanyakannya digunakan dalam memformat tajuk, subtajuk dan tajuk pada halaman web. Pengguna juga boleh digunakan untuk meningkatkan kebolehbacaan item menu atau penyenaraian produk. Ia juga meningkatkan rupa keseluruhan dan pengiktirafan halaman web.

Artikel ini menunjukkan prosedur langkah demi langkah untuk menukar teks huruf besar kepada huruf besar.

Bagaimana untuk Menukar Teks Huruf Besar kepada Huruf Tajuk?

Dengan bantuan sifat CSS dan JavaScript, teks huruf besar boleh ditukar menjadi huruf besar. Penukaran ini membantu dalam meningkatkan kebolehbacaan dan penampilan teks. Selain itu, ia menyediakan pemformatan yang konsisten dan meningkatkan pengalaman pengguna.







Ikuti panduan langkah demi langkah di bawah untuk penukaran daripada huruf besar kepada huruf besar:



Langkah 1: Buat Elemen Sasaran
Dalam langkah pertama ini, buat elemen disasarkan/dipilih di dalam “ teg ” yang ditukar kepada huruf besar. Sebagai contoh, ' hlm ” data elemen disasarkan:



< pusat >
< hlm ID = 'penukar' > TEKS INI DITUKARKAN DARI HURUF BESAR KE KES TAJUK MENGGUNAKAN CSS < / hlm >
< pusat >

Dalam blok kod di atas:





  • Pertama, gunakan '

    teg ” untuk memaparkan teks di tengah-tengah halaman web di dalam “ ” tag. Juga, sediakan data tiruan dalam format huruf besar.

  • Seterusnya, tambahkan “ ID atribut ” dan berikannya nilai “ penukar ”. Ini ' ID ” akan digunakan untuk menyimpan rujukan teg

    di dalam teg JavaScript.

Selepas tamat fasa penyusunan:



Gambar di atas halaman web memaparkan bahawa teks telah berjaya dipaparkan.

Langkah 2: Menukar Huruf Besar kepada Huruf Tajuk
Untuk mencipta penukar, sifat dan kaedah JavaScript digunakan. Ikuti kod di bawah, penerangannya dinyatakan di bawah:

< skrip >
adalah sasaran = document.getElementById ( 'penukar' ) .textContent.toLowerCase ( ) ;
sasaran = sasaran .ganti ( / \b\w / g,
fungsi ( lebih rendah ) { kembali lebih rendah.kepadaUpperCase ( ) ; } ) ;
document.getElementById ( 'penukar' ) .textContent = sasaran ;
< / skrip >

Dalam coretan kod di atas:

  • Pertama, buat pembolehubah bernama ' sasaran ' di dalam ' ” tag.
  • Seterusnya, gunakan ' kandungan teks ” harta untuk memilih hanya teks yang meninggalkan ruang dan tag lain. ' toLowerCase() Fungsi ” mempunyai id “penukar” yang menyimpan nilai kepada pembolehubah “sasaran”.
  • Kemudian, ' menggantikan() ' kaedah digunakan untuk menukar nilai pembolehubah 'sasaran'. Ia memilih aksara pertama bagi setiap perkataan menggunakan “ \b\w ungkapan ” dan kemudian menggunakan “ toUpperCase() ” fungsi. Ia menukar format teks kepada huruf besar.
  • Pada akhirnya, nilai baharu pembolehubah 'sasaran' dipaparkan pada skrin yang mempunyai id ' penukar ”.

Selepas pelaksanaan coretan kod:

Output menunjukkan bahawa teks huruf besar telah ditukar kepada format huruf besar.

Kesimpulan

Untuk menukar huruf besar kepada huruf besar, gunakan “ toLowerCase() ” fungsi pada elemen yang dipilih. Selepas itu, gunakan ' menggantikan() fungsi ” untuk memilih aksara pertama bagi setiap perkataan menggunakan “ \b\w ” ungkapan. Pada akhirnya, aksara yang dipilih ditukar kepada huruf besar menggunakan “ toUpperCase() ” fungsi. Artikel ini telah menunjukkan prosedur untuk menukar teks huruf besar bagi elemen yang dipilih kepada huruf besar.