CSS に JavaScript 機能を埋め込むにはどうすればよいですか?

CSS への JavaScript の埋め込み

CSS 内で JavaScript を直接実行することはできませんが、同様の機能を可能にする独創的なテクニックがあります。

IE: 表現手法と HTC動作

Internet Explorer には 2 つのメソッドが用意されています。

• 式テクニック: JavaScript 式を評価する式の作成が含まれます。例:

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

• HTC の動作: CSS 経由でロードされた別の XML ファイル (script.htc) を使用します。 HTC ファイル内では、JavaScript を実行できます。

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 は、XBL と呼ばれる同様の XML ベースのソリューションを提供します。 .

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

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

  <binding>

重要考慮事項

• JavaScript は、CSS セレクターがドキュメント内の要素と一致する場合にのみ実行されます。
• これらの手法は標準化されていないため、すべてのブラウザーで機能するとは限りません。
• セキュリティに影響を与える可能性があるため、慎重に使用してください。

以上がCSS に JavaScript 機能を埋め込むにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。