Alih-alih menerapkan pemformatan eksplisit ke teks, Anda bisa mengapit rentang teks dalam elemen non-pemformatan. Jenis markup ini disebut sebagai rentang teks (sebelumnya dikenal sebagai teks tanpa tanda kutip). Tujuannya adalah untuk memungkinkan atribut seperti peran dan ID diterapkan ke teks yang tidak diformat. Padahal atribut tersebut masih bisa digunakan untuk menerapkan gaya pada teks
Sintaks rentang teks
Ketika teks diapit dalam sepasang simbol hash tunggal atau ganda (#) dan memiliki setidaknya satu peran, peran akan diterapkan ke teks tersebut tanpa menambahkan pemformatan implisit lainnya
Jika tidak ada attrlist, pasangan pemformatan akan ditafsirkan sebagai teks yang disorot
Contoh 1. Sintaks rentang teks
The text [.underline]#underline me# is underlined.
Ketika dikonversi ke HTML, itu diterjemahkan ke dalam output berikut
Contoh 2. Keluaran HTML rentang teks
The text <span class="underline">underline me</span> is underlined._
Seperti yang Anda lihat, terserah stylesheet untuk menyediakan gaya untuk elemen ini. Biasanya, ini berarti Anda harus menentukan gaya inline khusus yang dipetakan ke kelas yang sesuai. Dalam hal ini, karena underline_ adalah peran bawaan, gaya disediakan untuk Anda
Peran bawaan untuk teks
Bahasa AsciiDoc menyediakan beberapa peran bawaan yang dapat Anda gunakan untuk memberikan petunjuk pemformatan untuk teks. Meskipun peran ini sering digunakan dengan rentang teks, mereka juga dapat digunakan dengan teks berformat lainnya yang menerima peran
Tidak semua pengonversi mengenali peran ini, meskipun Anda dapat mengharapkannya setidaknya didukung oleh pengonversi HTML
Peran-peran tersebut adalah sebagai berikut
menggarisbawahi
Menerapkan dekorasi garis bawah ke rentang teks
garis besarMenerapkan dekorasi overline ke rentang teks
line-throughMenerapkan dekorasi line-through (alias dicoret) ke rentang teks
nobreakMenonaktifkan kata-kata dalam rentang teks agar tidak rusak
nowrapMencegah rentang teks dari pembungkus sama sekali
pra-bungkusMencegah urutan ruang dan karakter seperti ruang agar tidak diciutkan (mis. e. , semua ruang dipertahankan)
Ada beberapa peran bawaan yang pernah didukung di AsciiDoc, tetapi sudah tidak digunakan lagi. Peran ini termasuk big, small, bernama warna (e. g. , aqua_), dan diberi nama warna latar belakang (mis. g. , aqua-background_). Anda harus membuat peran semantik Anda sendiri sebagai pengganti peran yang tidak digunakan lagi ini
Properti textContent_ digunakan untuk mengatur dan mengembalikan konten teks dari node yang ditentukan dan semua turunannya
Untuk mendapatkan isi elemen span gunakan properti textContent bersama dengan metode getElementById(). Kita juga bisa mendapatkan konten elemen span menggunakan properti innerText. Kedua properti itu serupa, tetapi ada beberapa perbedaan di antara keduanya
- The textContent property returns the content of all elements while the innerText property also returns the content of all elements except and tag.
- Properti innerText_ tidak menampilkan teks yang disembunyikan menggunakan properti CSS
Dengan menggunakan properti ini, kami dapat menghapus sejumlah node anak. Kami juga dapat mengganti teks di dalam simpul dengan satu simpul teks yang berisi simpul yang ditentukan
Contoh. Menggunakan textContent_ Properti
Dalam contoh yang diberikan, kami telah menggunakan properti textContent untuk mengubah teks elemen span
<!DOCTYPE html> <html lang="en"> <head> <title>Change the text of a span element</title> </head> <body> <span id="myspan">Hello World</span> <script> document.getElementById("myspan").textContent="Welcome to Studytonight"; </script> </body> </html>Keluaran
Selamat datang di Studytonight
Menggunakan properti innerText
Kita juga dapat mengubah teks elemen span yang ada menggunakan properti JavaScript innerText. Properti ini menyetel atau mengembalikan konten teks dari elemen yang ditentukan atau turunannya
Contoh. Menggunakan properti innerText_
Dalam contoh ini, kami telah menggunakan properti innerText untuk mengubah konten elemen span
<!DOCTYPE html> <html lang="en"> <head> <title>Change the text of a span element</title> </head> <body> <span id="myspan">Hello World</span> <script> document.getElementById("myspan").innerText="Welcome to Studytonight"; </script> </body> </html>Keluaran
Selamat datang di Studytonight
Kesimpulan
Di sini, kita telah membahas cara mengubah teks elemen span menggunakan JavaScript. Kita dapat mengubah teks elemen span menggunakan properti textContent dan properti innerText. Kedua properti tersebut memungkinkan kita untuk mengubah konten teks elemen rentang yang ada secara dinamis