Wie kann ich JavaScript-Funktionalität in CSS einbetten?

JavaScript in CSS einbetten

Während es nicht direkt möglich ist, JavaScript innerhalb von CSS auszuführen, gibt es kreative Techniken, die eine ähnliche Funktionalität ermöglichen.

IE: Ausdruckstechnik und HTC-Verhalten

Internet Explorer bietet zwei Methoden:

• Ausdruckstechnik: Beinhaltet das Erstellen eines Ausdrucks, der einen JavaScript-Ausdruck auswertet. Zum Beispiel:

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

• HTC-Verhalten: Verwendet eine separate XML-Datei (script.htc), die über CSS geladen wird. Innerhalb der HTC-Datei kann JavaScript ausgeführt werden.

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 bietet eine ähnliche XML-basierte Lösung namens XBL .

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

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

  <binding>

Wichtig Überlegungen

• JavaScript wird nur ausgeführt, wenn der CSS-Selektor mit einem Element im Dokument übereinstimmt.
• Diese Techniken sind nicht standardisiert und funktionieren möglicherweise nicht in allen Browsern.
• Sie können Auswirkungen auf die Sicherheit haben. Gehen Sie daher vorsichtig damit um.

Das obige ist der detaillierte Inhalt vonWie kann ich JavaScript-Funktionalität in CSS einbetten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!