Teks ialah aset yang paling penting dan paling ketara bagi setiap aplikasi atau halaman web, tanpa penggunaan teks, pencipta tidak dapat menyampaikan sepenuhnya pemikirannya atau menyampaikan maklumat dengan betul. Disebabkan keperluan dan kepentingannya, penggayaannya juga menjadi mimpi ngeri bagi kebanyakan pembangun. Untuk teks statik, sifat CSS dan rangka kerjanya banyak membantu tetapi masih, terdapat keperluan untuk sifat yang boleh digunakan untuk gaya secara dinamik. Nasib baik, harta ini disediakan oleh JavaScript yang mempunyai nama ' textDecoration ”.
Blog ini akan menyediakan prosedur untuk menggunakan gaya pada elemen HTML melalui sifat textDecoration.
Bagaimana untuk Memohon Gaya Menggunakan HTML DOM Style textDecoration Property?
Gaya DOM “ textDecoration harta ” pada dasarnya melakukan penggayaan seperti menambah “ garis bawah', 'garis atas', 'garis-garis' dan 'kelip ” atas elemen yang dipilih. Sifat ini apabila ditetapkan kepada “ tiada ” mengalih keluar penggayaan lalai yang digunakan pada elemen tersebut seperti tag sauh.
Sintaks
Sintaks untuk sifat textDecoration gaya DOM ialah:
eleObj. gaya . textDecoration = 'tiada|overline|kelip|garis bawah|awal|line-through|warisi'
Lawati jadual di bawah untuk mendapatkan idea pantas tentang nilai yang boleh diberikan kepada “ textDecoration ” harta:
| Nilai | Penjelasan |
|---|---|
| tiada | Tukar teks ke dalam format biasa dengan mengalih keluar semua penggayaan yang telah ditetapkan; ia adalah lalai. |
| atas talian | Memasukkan baris di atas atau di atas teks yang dipilih. |
| kejap | Membuat teks berkelip tetapi ia tidak disokong oleh semua pelayar web. |
| garis bawah | Ia meletakkan baris di bawah atau di bahagian bawah teks yang dipilih. |
| permulaan | Tetapkan harta yang digunakan kepada nilai lalainya yang tiada dalam kes kami. |
| talian melalui | Letakkan garisan di tengah-tengah teks iaitu di antara teks. |
| kamu mewarisi | Mewarisi sifat yang digunakan pada akar atau elemen induk. |
Sekarang, mari kita lihat proses pelaksanaan dan kesannya pada teks untuk setiap nilai ' textDecoration ” harta benda.
Contoh 1: Harta “textDecoration = none”.
Pelaksanaan praktikal ' textDecoration ” harta yang mempunyai nilai “ tiada ' akan dijelaskan dalam kod di bawah:
< badan >
< pusat >
< h1 gaya = 'warna: kadet biru;' > Linux < / h1 >
< butang onclick = 'Pengguna()' > Applier < / butang >
< hlm > Apabila nilai harta textDecoration ditetapkan kepada tiada: < / hlm >
< h3 ID = 'useCase' gaya = 'text-decoration: overline;' > Elemen Sasaran < / h3 >
< / pusat >
< skrip >
function Applier() {
document.getElementById('useCase').style.textDecoration = 'tiada';
}
< / skrip >
< / badan >
Penjelasan kod yang dinyatakan di atas:
- Pertama, gunakan '< butang >” untuk membuat butang dan menetapkannya sebagai pendengar acara “ onclick ”. Pendengar acara ini mencetuskan fungsi JavaScript bernama “ Applier ”.
- Seterusnya, buat elemen sasaran ' h3 ” dan berikannya id unik “ useCase ”. Juga, gunakan CSS ' hiasan teks ” harta kepadanya yang mempunyai nilai “ atas talian ” dengan bantuan “ gaya ” atribut.
- Sekarang, masukkan ' Applier ()” badan fungsi dan pilih elemen yang disasarkan melalui idnya “ useCase 'dan lampirkan gaya' textDecoration ” harta benda.
- Selepas itu, tetapkan harta itu nilai ' tiada ” untuk mengalih keluar sebarang penggayaan hiasan teks pra-pakai ke atas elemen.
Paparan halaman web selepas pelaksanaan kod di atas:
Output menunjukkan pra-penggayaan yang digunakan pada elemen yang disasarkan akan dialih keluar dengan memberikannya nilai ' tiada ”.
Contoh 2: Harta “textDecoration = initial”.
Coretan kod di bawah menggambarkan pelaksanaan ' textDecoration ” harta apabila nilai “ permulaan ” ditugaskan kepadanya:
< skrip >fungsi Applier ( ) {
dokumen. getElementById ( 'useCase' ) . gaya . textDecoration = 'awal' ;
}
skrip >
Output yang dihasilkan selepas penyusunan kod di atas ditunjukkan di bawah:
Output di atas menunjukkan bahawa nilai hiasan teks ditetapkan kepada nilai lalainya iaitu “ tiada ” dan oleh itu semua prapenggayaan telah dikembalikan.
Contoh 3: Harta “textDecoration = overline”.
Kod di bawah menunjukkan pelaksanaan praktikal ' textDecoration ” harta apabila nilai “ atas talian ” disediakan kepadanya:
< badan >< pusat >
< h1 gaya = 'warna: kadet biru;' > Linux < / h1 >
< butang onclick = 'Pengguna()' > Applier < / butang >
< hlm > Apabila nilai harta textDecoration ditetapkan kepada garis atas: < / hlm >
< h3 ID = 'useCase' > Elemen Sasaran < / h3 >
< / pusat >
< skrip >
function Applier() {
document.getElementById('useCase').style.textDecoration = 'overline';
}
< / skrip >
< / badan >
Penjelasan kod di atas dinyatakan di bawah:
- Pertama, ' butang' dan 'h3 ” elemen dicipta dengan cara yang sama dan sifat CSS yang digunakan di atas “h3” elemen kini dialih keluar.
- Seterusnya, di dalam ' Applier fungsi ' elemen sasaran dipilih dan ' textDecoration ” harta yang mempunyai nilai “ atas talian ” diberikan kepada elemen.
Output selepas pelaksanaan kod di atas dipaparkan di bawah:
Output menunjukkan kesan ' textDecoration = overline ” harta di atas teks.
Contoh 4: Harta “textDecoration = underline”.
Pelaksanaan praktikal teks apabila nilai “ garis bawah 'ditugaskan kepada' textDecoration ” harta dinyatakan di bawah:
< skrip >fungsi Applier ( ) {
dokumen. getElementById ( 'useCase' ) . gaya . textDecoration = 'gariskan' ;
}
skrip >
Selepas penyusunan, output kelihatan seperti ini:
Output menunjukkan baris ditambah di bahagian bawah teks.
Contoh 5: Harta “textDecoration = line-through”.
Pelaksanaan visual ' textDecoration ” harta yang mempunyai nilai “ talian melalui ” ditunjukkan di bawah:
< skrip >fungsi Applier ( ) {
dokumen. getElementById ( 'useCase' ) . gaya . textDecoration = 'garis-garis' ;
}
skrip >
Output yang dihasilkan untuk kod di atas dipaparkan di bawah:
Output menunjukkan kesan yang dilakukan oleh ' talian melalui ” atas teks unsur yang disasarkan.
Kesimpulan
Gaya HTML DOM “ textDecoration ” property khusus memperkatakan penggayaan elemen HTML melalui JavaScript untuk melaksanakan penggayaan dinamik pada elemen teks. Berbilang nilai boleh diberikan kepada ' ini textDecoration ” untuk melakukan variasi penggayaan yang berbeza. Nilai-nilai ini ialah “ tiada”, “overline”, “underline”, “line-through”, “initial”, “blink” dan “inherit ”. Blog ini telah berjaya menerangkan proses pembangun boleh menggunakan gaya menggunakan sifat textDecoration.