Pengenalan kepada penggunaan CSS expression_CSS/HTML

Versi IE5 dan yang lebih baru menyokong penggunaan ungkapan dalam CSS untuk mengaitkan atribut CSS dengan ungkapan Javascript Atribut CSS di sini boleh menjadi atribut yang wujud bagi elemen atau atribut tersuai.

Atribut CSS boleh diikuti dengan 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 anda boleh menggunakan objek penyemak imbas lain. Ungkapan itu seolah-olah berada dalam fungsi ahli elemen ini.

Berikan nilai kepada atribut yang wujud bagi elemen

Contohnya, anda boleh meletakkan elemen berdasarkan saiz penyemak imbas.

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

Berikan nilai kepada atribut tersuai elemen

Contohnya, hapuskan kotak putus-putus pautan pada halaman. ?Pendekatan biasa ialah:

link1
link2
link3?

Pada pandangan pertama, kelebihan menggunakan ekspresi mungkin tidak jelas, tetapi jika terdapat berpuluh-puluh atau ratusan pautan pada halaman anda, adakah anda masih akan menggunakan Ctrl+C dan Ctrl+V secara mekanikal , yang manakah menghasilkan lebih banyak kod berlebihan?

Kaedah menggunakan ungkapan adalah seperti berikut:?

a?{star?:?expression(onfocus=this.blur)}

link1
link2
?

Penjelasan: Bintang di dalam adalah atribut yang ditakrifkan oleh anda sendiri ungkapan. Tanda petikan, kerana intipatinya masih CSS, jadi ia diletakkan dalam tag gaya dan bukannya s?skrip. OK, ini memudahkan 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. Contohnya, jika anda ingin menukar warna kotak teks pada halaman semasa tetikus bergerak masuk dan keluar, anda mungkin terfikir bahawa ia harus ditulis sebagai ?

input?
{star?:?expression(onmouseover=this.style.backgroundColor="#FF0000";
onmouseout=this .style.backgroundColor="#FFFFFF")}


input?{star?:?expression(onmouseover=this .style.backgroundColor="#FF0000";
onmouseout=this.style.backgroundColor="#FFFFFF")}

Tetapi hasilnya adalah ralat skrip Cara yang betul untuk menulisnya ialah dengan menulis definisi gaya CSS ke dalam fungsi, seperti yang ditunjukkan di bawah:

input?{star?:?expression(onmouseover=function()
{this.style.backgroundColor="#FF0000"},
onmouseout=function(){this.style.backgroundColor="#FFFFFF"})?}



?

Perhatian

Ia biasanya tidak digalakkan untuk menggunakan ungkapan kerana ekspresi memerlukan sumber penyemak imbas yang agak tinggi.