Can JavaScript be integrated into CSS, and how?

Can JavaScript Be Integrated into CSS?

In CSS, there are ways to trigger JavaScript execution. Internet Explorer and Firefox offer specific methods.

HTC in Internet Explorer

Use a CSS rule:

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

Within the script.htc file:

<PUBLIC:COMPONENT TAGNAME="xss">
   <PUBLIC:ATTACH EVENT="ondocumentready" ONEVENT="main()" LITERALCONTENT="false"/>
</PUBLIC:COMPONENT>
<SCRIPT>
   function main() 
   {
     alert("HTC script executed.");
   }
</SCRIPT>

The HTC file runs the main() function upon ondocumentready (when the HTC document is ready).

XBL in Firefox

Use a CSS rule:

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

Within script.xml:

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

<binding>

Code in the constructor tag will be executed.

In both methods, execution occurs when the CSS selector matches an element in the document. Using body triggers execution upon page load.

The above is the detailed content of Can JavaScript be integrated into CSS, and how?. For more information, please follow other related articles on the PHP Chinese website!