CSS における Javascript: 可能性の探求
CSS と Javascript の領域は通常、別々に動作しますが、特定の領域ではギャップを埋めることができます。ウェブブラウザ。ここでは、IE と Firefox で CSS 内に Javascript 機能を統合する方法を詳しく説明します。
HTC 動作 (IE):
HTC 動作により、スクリプトを CSS 内の XML ファイルとして保存します。 body {behavior:url(script.htc);} のような CSS ルールを定義すると、外部 XML ファイルを HTML 本文に読み込むことができます。 XML ファイル内で、コンポーネントを定義し、Javascript コードをトリガーする ondocumentready のようなイベント ハンドラーを指定できます。
例:
script.htc:
<PUBLIC:COMPONENT TAGNAME="xss"> <PUBLIC:ATTACH EVENT="ondocumentready" ONEVENT="main()" LITERALCONTENT="false"/> </PUBLIC:COMPONENT> <SCRIPT> function main() { alert("HTC script executed."); } </SCRIPT>
XBL (Firefox):
Firefox は XBL (Extensible Binding Language) を利用してスクリプトを CSS に統合します。 body {-moz-binding: url(script.xml#mycode);} のような CSS ルールを使用すると、XML ファイルを CSS セレクターにバインドできます。 XML ファイル内で、必要な Javascript コードを含む実装とのバインディングを定義します。 execute.
例:
script.xml:
<?xml version="1.0"?> <bindings xmlns="http://www.mozilla.org/xbl" xmlns:html="http://www.w3.org/1999/xhtml"> <binding>
制限事項:
どちらの手法でも、JavaScript コードがCSS セレクターがページ上の要素と一致する場合にのみ実行されます。たとえば、上記の手法を body 要素に適用すると、ページが読み込まれるとすぐにコードが実行されます。
以上がJavascript を CSS に統合できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。