Teks merupakan aset yang paling penting dan paling terlihat pada setiap aplikasi atau halaman web, tanpa penggunaan teks pencipta tidak dapat menyampaikan pemikirannya atau menyampaikan informasi secara utuh dengan baik. Karena kebutuhan dan pentingnya, penataannya juga menjadi mimpi buruk bagi sebagian besar pengembang. Untuk teks statis, properti CSS dan frameworknya sangat membantu namun tetap diperlukan properti yang dapat diterapkan untuk menata gaya secara dinamis. Untungnya, properti ini disediakan oleh JavaScript dengan nama “ dekorasi teks ”.
Blog ini akan menyediakan prosedur untuk menerapkan gaya pada elemen HTML melalui properti textDecoration.
Bagaimana Cara Menerapkan Gaya Menggunakan Properti TextDecoration Gaya DOM HTML?
Gaya DOM “ dekorasi teks ” Properti pada dasarnya melakukan penataan gaya seperti menambahkan “ garis bawah”, “garis atas”, “garis tembus”, dan “berkedip ” pada elemen yang dipilih. Properti ini bila disetel ke “ tidak ada ” menghapus gaya default yang diterapkan pada elemen tersebut seperti tag jangkar.
Sintaksis
Sintaks untuk properti textDecoration gaya DOM adalah:
eleObj. gaya . dekorasi teks = 'tidak ada|overline|blink|underline|inisial|line-through|mewarisi'
Kunjungi tabel di bawah ini untuk mendapatkan gambaran singkat tentang nilai yang dapat ditetapkan ke “ dekorasi teks ' Properti:
| Nilai | Penjelasan |
|---|---|
| tidak ada | Ubah teks menjadi format biasa dengan menghapus semua gaya yang telah ditentukan sebelumnya; itu adalah defaultnya. |
| garis atas | Menyisipkan garis di atas atau di atas teks yang dipilih. |
| berkedip | Membuat teks berkedip namun tidak didukung oleh semua browser web. |
| menggarisbawahi | Ini menempatkan garis di bawah atau di bawah teks yang dipilih. |
| awal | Tetapkan properti yang diterapkan ke nilai defaultnya yang tidak ada dalam kasus kami. |
| garis-melalui | Tempatkan garis di tengah teks yaitu di antara teks. |
| mewarisi | Mewarisi properti yang diterapkan pada elemen root atau induk. |
Sekarang, mari kita lihat proses implementasi dan pengaruhnya terhadap teks untuk setiap nilai “ dekorasi teks ' Properti.
Contoh 1: Properti “textDecoration = none”.
Implementasi praktis dari “ dekorasi teks ” properti yang mempunyai nilai “ tidak ada ” akan dijelaskan dalam kode di bawah ini:
< tubuh >
< tengah >
< h1 gaya = 'warna: kadet biru;' > Linux < / h1 >
< tombol klik = 'Pemohon()' > penerapan < / tombol >
< P > Ketika nilai properti textDecoration disetel ke none: < / P >
< h3 pengenal = 'kasus penggunaan' gaya = 'dekorasi teks: overline;' > Elemen yang Ditargetkan < / h3 >
< / tengah >
< naskah >
fungsi Penerapan() {
document.getElementById('useCase').style.textDecoration = 'tidak ada';
}
< / naskah >
< / tubuh >
Penjelasan kode yang disebutkan di atas:
- Pertama, gunakan “< tombol >” tag untuk membuat tombol dan menetapkannya sebagai pendengar acara “ klik ”. Pemroses acara ini memicu fungsi JavaScript bernama “ penerapan ”.
- Selanjutnya, buat elemen yang ditargetkan “ h3 ” dan berikan id unik “ kasus penggunaan ”. Juga, terapkan CSS “ dekorasi teks ” properti yang memiliki nilai “ garis atas ” dengan bantuan “ gaya ” atribut.
- Sekarang, masukkan “ penerapan ()” badan fungsi dan pilih elemen yang ditargetkan melalui idnya “ kasus penggunaan ” dan lampirkan gaya “ dekorasi teks ' Properti.
- Setelah itu, tetapkan properti tersebut nilai “ tidak ada ” untuk menghapus gaya dekorasi teks yang telah diterapkan sebelumnya pada elemen.
Tampilan halaman web setelah eksekusi kode di atas:
Outputnya menunjukkan pra-penataan gaya yang diterapkan pada elemen yang ditargetkan dihapus dengan memberinya nilai “ tidak ada ”.
Contoh 2: Properti “textDecoration = awal”.
Cuplikan kode di bawah ini menggambarkan implementasi dari “ dekorasi teks ” properti ketika nilai “ awal ” ditugaskan padanya:
< naskah >fungsi penerapan ( ) {
dokumen. dapatkanElementById ( 'kasus penggunaan' ) . gaya . dekorasi teks = 'awal' ;
}
naskah >
Output yang dihasilkan setelah kompilasi kode di atas ditunjukkan di bawah ini:
Output di atas menunjukkan bahwa nilai dekorasi teks diatur ke nilai defaultnya yaitu “ tidak ada ” dan karenanya semua pra-penataan gaya telah dikembalikan.
Contoh 3: Properti “textDecoration = overline”.
Kode di bawah ini menunjukkan implementasi praktis dari “ dekorasi teks ” properti ketika nilai “ garis atas ” disediakan untuk itu:
< tubuh >< tengah >
< h1 gaya = 'warna: kadet biru;' > Linux < / h1 >
< tombol klik = 'Pemohon()' > penerapan < / tombol >
< P > Ketika nilai properti textDecoration diatur ke overline: < / P >
< h3 pengenal = 'kasus penggunaan' > Elemen yang Ditargetkan < / h3 >
< / tengah >
< naskah >
fungsi Penerapan() {
document.getElementById('useCase').style.textDecoration = 'overline';
}
< / naskah >
< / tubuh >
Penjelasan kode di atas adalah sebagai berikut:
- Pertama, “ tombol” dan “h3 ” Elemen dibuat dengan cara yang sama dan properti CSS yang diterapkan di atas “h3” elemen sekarang dihapus.
- Selanjutnya, di dalam “ penerapan ” fungsi elemen yang ditargetkan dipilih dan “ dekorasi teks ” properti yang mempunyai nilai “ garis atas ” ditugaskan ke elemen.
Output setelah eksekusi kode di atas ditampilkan di bawah ini:
Outputnya menunjukkan efek dari “ textDecoration = garis atas ” properti di atas teks.
Contoh 4: Properti “textDecoration = underline”.
Implementasi praktis teks ketika nilai “ menggarisbawahi ” ditugaskan ke “ dekorasi teks ” properti dinyatakan di bawah ini:
< naskah >fungsi penerapan ( ) {
dokumen. dapatkanElementById ( 'kasus penggunaan' ) . gaya . dekorasi teks = 'menggarisbawahi' ;
}
naskah >
Setelah dikompilasi, outputnya seperti ini:
Outputnya menunjukkan baris ditambahkan di bagian bawah teks.
Contoh 5: Properti “textDecoration = line-through”.
Implementasi visual dari “ dekorasi teks ” properti yang mempunyai nilai “ garis-melalui ” ditampilkan di bawah ini:
< naskah >fungsi penerapan ( ) {
dokumen. dapatkanElementById ( 'kasus penggunaan' ) . gaya . dekorasi teks = 'lintasan' ;
}
naskah >
Output yang dihasilkan untuk kode di atas ditampilkan di bawah ini:
Outputnya menunjukkan efek yang dilakukan oleh “ garis-melalui ” di atas teks elemen yang ditargetkan.
Kesimpulan
Gaya HTML DOM “ dekorasi teks Properti ” secara khusus menangani penataan gaya elemen HTML melalui JavaScript untuk melakukan penataan gaya dinamis pada elemen teks. Beberapa nilai dapat ditetapkan ke “ dekorasi teks ” untuk melakukan variasi gaya yang berbeda. Nilai-nilai tersebut adalah “ tidak ada”, “garis atas”, “garis bawah”, “garis tembus”, “awal”, “berkedip”, dan “mewarisi ”. Blog ini telah berhasil menjelaskan proses dimana pengembang dapat menerapkan gaya menggunakan properti textDecoration.