Gunakan CSS untuk mengawal atribut teks_CSS/HTML secara dinamik

Artikel ini memperkenalkan secara terperinci topik penggunaan CSS untuk mengawal atribut teks secara dinamik Ia menggunakan ciri menukar nilai atribut CSS secara dinamik untuk mentakrifkan berbilang nilai atribut teks, dan kemudian menggunakan peristiwa untuk mencetuskannya Setelah peristiwa itu berlaku, kemudian tukar nilai atribut teks untuk mencapai tujuan yang diharapkan.

Anda boleh menggunakan CSS dengan mudah untuk menukar sifat teks secara dinamik, supaya anda boleh mencipta teks yang membesar secara dinamik, mengecut, menukar warna teks, menukar latar belakang teks, jarak aksara, Jarak baris dan kesan halaman web lain semuanya di bawah kawalan anda. Bukankah ia agak misteri? Itu sahaja caranya. Itu mesti rumit kan? Tidak! Selepas membaca artikel ini, anda akan faham bahawa ia sangat mudah.
Sila lihat contoh berikut:

1 Tukar saiz teks secara dinamik
Kesan contoh ini ialah: sekeping teks apabila tetikus berada pada bahagian ini teks, teks menjadi lebih besar , dan kemudian kembali ke kedudukan asal apabila tetikus pergi.
Kaedah pengeluaran:
1. Dalam Dreamweaver3, gunakan panel CSS untuk mentakrifkan dua kelas CSS Satu dinamakan "style1" dan ditakrifkan sebagai fon besar (18px); saiz fon (12px). Kod CSS yang diperolehi adalah seperti berikut:

Netizen yang tidak menggunakan Dreamweaver boleh menyalin kod di atas terus antara
dan

kod halaman web. 2. Tambahkan kod ini pada teg teks ini: onmouseover="this.className=''style1''" onmouseout="this.className=''style2''". Pada ketika ini, pengeluaran selesai, dan kod sumber teks yang boleh menghasilkan kesan adalah seperti berikut:

Apabila tetikus berada pada teks ini, teks menjadi lebih besar, dan apabila tetikus dialihkan, ia menjadi lebih kecil.
Netizen yang tidak menggunakan Dreamweaver hanya perlu menukar kod ke atas Anda boleh pratonton untuk melihat kesan sebenar.

2 Tukar saiz, warna dan keberanian teks secara dinamik pada masa yang sama
Kesan contoh ini ialah: apabila tetikus berada pada teks, saiznya , warna dan keberanian teks berubah , ia akan kembali kepada keadaan asalnya apabila tetikus dialihkan. Kaedah pengeluaran contoh ini adalah sama seperti Contoh 1. Satu-satunya perbezaan ialah atribut teks yang berbeza ditakrifkan dalam CSS, jadi kaedah pengeluaran tidak akan diulang. Kod CSS yang ditambahkan antara
dan
ialah:

Penghasilan selesai Kod sumber teks yang boleh menghasilkan kesan ialah seperti berikut :

Gerakkan tetikus ke atas teks ini untuk menukar saiz, warna dan keberanian teks, dan ia akan kembali kepada keadaan asal apabila tetikus pergi.
3 Tukar latar belakang sebahagian teks secara dinamik

Kesan contoh ini ialah: apabila tetikus bergerak ke atas baris teks tertentu, latar belakang sebahagian daripada teks dalam baris berubah Latar belakang perniagaan kami yang lain kekal tidak berubah.

Terdapat beberapa perubahan dalam kaedah pengeluaran antara contoh ini dan contoh di atas mengubah atribut keseluruhan teks, jadi peristiwa pencetus dimuatkan pada tanda "P" manakala dalam contoh ini, hanya a bahagian teks ditukar Warna latar belakang bahagian teks, jadi anda harus menggunakan teg "Span" terlebih dahulu untuk melampirkan teks yang anda ingin tukar latar belakang, dan kemudian memuatkan peristiwa pencetus ke teg "Span" . Kod CSS yang ditambahkan antara dan

dalam contoh ini ialah:

Selepas pengeluaran selesai, kod sumber teks yang boleh menghasilkan kesan adalah seperti berikut:


Apabila tetikus bergerak ke atas teks ini, latar belakang berubah, tetapi latar belakang perenggan lain dalam baris ini kekal tidak berubah.

4 Tambah ikon pada hiperpautan secara dinamik
Kesan contoh ini ialah: apabila tetikus bergerak ke atas hiperpautan, imej akan muncul di sebelah kirinya , tetikus bergerak menjauh dan imej hilang. Kaedah pengeluaran contoh ini adalah sama seperti yang sebelumnya, iaitu menukar latar belakang teks, tetapi terdapat beberapa perkara yang perlu diberi perhatian semasa membuat:
1 Apabila menetapkan latar belakang CSS , pilih latar belakang imej, dan tetapkan Apabila menetapkan parameter "ulang" latar belakang imej, pilih "tidak berulang" (tidak berjubin
2. Apabila menetapkan hiperpautan, tempah ruang untuk imej pada sebelah kirinya;
3. Peristiwa Pencetus dimuatkan pada hiperpautan. Kod CSS yang ditambah antara dan dalam contoh ini ialah: Penghasilan selesai, hyperlink yang boleh menghasilkan kesan kod sumber adalah seperti ini: Alihkan tetikus ke atas Dengan menukar sifat CSS teks secara dinamik, anda juga boleh mencipta banyak kesan khas, tetapi kaedahnya pada asasnya sama , jadi saya tidak akan memberikan contoh satu persatu Setelah anda menguasai kaedah, anda boleh menggunakan imaginasi anda untuk mencipta.