Bagaimanakah Saya Boleh Membenamkan Fungsi JavaScript dalam CSS?

Membenamkan JavaScript dalam CSS

Walaupun tidak mungkin untuk melaksanakan JavaScript secara langsung dalam CSS, terdapat teknik kreatif yang membenarkan kefungsian yang serupa.

IE: Teknik Ekspresi dan HTC Gelagat

Internet Explorer menyediakan dua kaedah:

• Teknik Ungkapan: Melibatkan penciptaan ungkapan yang menilai ungkapan JavaScript. Contohnya:

body {
  color: (function() { return document.getElementById("button").style.color; })();
}

• Gelagat HTC: Menggunakan fail XML berasingan (script.htc) yang dimuatkan melalui CSS. Di dalam fail HTC, JavaScript boleh dilaksanakan.

body {
  behavior:url(script.htc);
}

<PUBLIC:COMPONENT TAGNAME="xss">
   <PUBLIC:ATTACH EVENT="ondocumentready" ONEVENT="main()" LITERALCONTENT="false"/>
</PUBLIC:COMPONENT>

<SCRIPT>
  function main() {
    alert("HTC script executed.");
  }
</SCRIPT>

Firefox: XBL

Firefox menawarkan penyelesaian berasaskan XML serupa yang dipanggil XBL .

body {
  -moz-binding: url(script.xml#mycode);
}

<bindings xmlns="http://www.mozilla.org/xbl" xmlns:html="http://www.w3.org/1999/xhtml">

  <binding>

Penting Pertimbangan

• JavaScript dilaksanakan hanya apabila pemilih CSS memadankan elemen dalam dokumen.
• Teknik ini tidak diseragamkan dan mungkin tidak berfungsi dalam semua penyemak imbas.
• Mereka boleh memperkenalkan implikasi keselamatan, jadi gunakan dengan berhati-hati.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membenamkan Fungsi JavaScript dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!