Css menggunakan ungkapan js untuk mencapai pertukaran effect_Experience

IE5 dan versi yang lebih baru menyokong penggunaan ungkapan dalam CSS untuk mengaitkan sifat CSS dengan ungkapan Javascript Sifat CSS di sini boleh menjadi sifat semula jadi unsur atau sifat tersuai. Maksudnya, atribut CSS boleh diikuti oleh ungkapan Javascript, dan nilai atribut CSS adalah sama dengan hasil pengiraan ungkapan Javascript. Anda boleh merujuk terus sifat dan kaedah elemen itu sendiri dalam ungkapan, atau menggunakan objek penyemak imbas lain. Ungkapan itu seolah-olah berada dalam fungsi ahli elemen ini.

Berikan nilai kepada sifat unsur unsur

Contohnya, anda boleh meletakkan elemen mengikut saiz penyemak imbas.

#myDiv {
kedudukan: mutlak;
lebar: 100px;
tinggi: 100px;
kiri: expression(document.body.offsetWidth - 110 + "px");
atas: ekspresi(document.body.offsetHeight - 110 + "px");
latar belakang: merah;
}

Tetapkan nilai pada atribut tersuai elemen

Sebagai contoh, hapuskan kotak bertitik pautan pada halaman. Pendekatan biasa ialah:

link1
link2
link3

Ia mungkin tidak kelihatan pada pandangan pertama Ini menunjukkan kelebihan menggunakan ungkapan, tetapi jika terdapat berpuluh-puluh atau bahkan ratusan pautan pada halaman anda, adakah anda masih menggunakan Ctrl+C dan Ctrl+V secara mekanikal Apatah lagi, membandingkan kedua-duanya, yang manakah menghasilkan lebihan? Bagaimana dengan lebih banyak kod?

Cara menggunakan ungkapan adalah seperti berikut:

a {star : expression(onfocus=this.blur)}
pautan1
pautan2
pautan3


Penjelasan: Bintang di dalamnya ialah atribut yang ditakrifkan sewenang-wenangnya oleh anda. Anda boleh mentakrifkannya seperti yang anda suka, dan kemudian pernyataan yang terkandung dalam expression() ialah skrip JS. Jangan lupa terdapat tanda petikan antara atribut tersuai dan ekspresi diletakkan dalam tag gaya, dan Bukan dalam skrip. OK, jadi mudah untuk menghapuskan kotak bertitik pautan dalam halaman dalam satu ayat. Tetapi jangan berpuas hati Jika kesan khas yang dicetuskan ialah perubahan atribut CSS, hasilnya akan berbeza daripada niat asal anda. Sebagai contoh, jika anda ingin menukar warna kotak teks pada halaman semasa tetikus bergerak masuk dan keluar, anda mungkin berfikir bahawa ia harus ditulis sebagai
{star : expression(onmouseover=this.style.backgroundColor="#FF0000";
onmouseout=this.style.backgroundColor="#FFFFFF")}


Tetapi hasilnya adalah ralat skrip Cara yang betul untuk menulisnya adalah dengan menulis takrif gaya CSS ke dalam fungsi, seperti berikut Paparan:

Nota Biasanya tidak disyorkan untuk menggunakan ungkapan kerana ekspresi memerlukan sumber penyemak imbas yang lebih tinggi.

Contoh: Gunakan ungkapan dalam css untuk melaksanakan kawalan kelompok objek antara muka

Penerangan masalah: Kami tahu daripada menggunakan gaya CSS bahawa kami boleh mentakrifkan atribut kelas bagi kumpulan objek untuk menentukan perkara yang sama gaya. Satukan antara muka. Tetapi bagaimana untuk menyatukan peristiwa objek jenis yang sama Sebagai contoh: terdapat banyak antara muka Bagaimana untuk menyedari bahawa apabila tetikus melepasi gambar ini, src gambar menjadi **_over. jpg?


Penyelesaian: Gunakan kaedah ekspresi css
Untuk pelaksanaan khusus, sila lihat kaedah penulisan .css:

/*Ganti imej CSS*. /
#imgScript { /*Di sini, gunakan ID objek untuk Gaya kad bebas, anda juga boleh mentakrifkan fungsi css*/
star:expression(
onmouseover = function()
{
/*Ganti imej*/
jika(this.hover != null) {
this.name = this.src;
this.src = this.src.replace('.jpg', '_over .jpg');
ini.HasChg = 1;
}
},
onmouseout = function()
{
/*Pulihkan gambar asal*/
jika (this.HasChg != null){
this.src = ini;
this.HasChg = null; tamatkan imgScript*/