Verwenden von Javascript in CSS

Ist es möglich, Javascript in CSS zu verwenden?

Wenn ja, können Sie ein einfaches Beispiel geben?

IE und Firefox enthalten beide Möglichkeiten zum Ausführen von JavaScript aus CSS. Wie Paolo erwähnt, ist eine Möglichkeit im IE die expressionTechnik, aber es gibt auch das dunkelere HTC-Verhalten , bei dem ein separates XML, das Ihr Skript enthält, über CSS geladen wird. Eine ähnliche Technik für Firefox gibt es unter Verwendung von XBL . Diese Techniken exectue JavaScript nicht von CSS direkt , aber die Wirkung ist die gleiche.

HTC mit IE

Verwenden Sie eine CSS-Regel wie folgt:

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

und in dieser script.htc-Datei gibt es so etwas wie:

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

Die HTC-Datei führt die main()Funktion für das Ereignis aus ondocumentready(unter Bezugnahme auf die Bereitschaft des HTC-Dokuments).

XBL mit Firefox

Firefox unterstützt einen ähnlichen Hack, der XML-Skripte ausführt, unter Verwendung von XBL.

Verwenden Sie eine CSS-Regel wie folgt:

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

und in Ihrer script.xml:

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

<binding id="mycode">
  <implementation>
    <constructor>
      alert("XBL script executed.");
    </constructor>
  </implementation>
</binding>

</bindings>

Der gesamte Code im Konstruktor-Tag wird ausgeführt (eine gute Idee, Code in einen CDATA-Abschnitt zu packen).

Bei beiden Techniken wird der Code nur ausgeführt, wenn der CSS-Selektor mit einem Element im Dokument übereinstimmt . Wenn Sie so etwas wie verwenden body, wird es sofort beim Laden der Seite ausgeführt.

Ich denke, was Sie vielleicht denken, sind expressionsoder "dynamische Eigenschaften" , die nur vom IE unterstützt werden und Sie eine Eigenschaft auf das Ergebnis eines Javascript-Ausdrucks setzen lassen. Beispiel:

width:expression(document.body.clientWidth > 800? "800px": "auto" );

Mit diesem Code emuliert der IE die max-widthEigenschaft, die er nicht unterstützt.

Alles in allem sollten Sie diese jedoch nicht verwenden . Sie sind eine schlechte, schlechte Sache.

Ich gehe davon aus, dass Sie dynamisches CSS suchen, um die potenzielle Lösung Ihres Problems anhand der von Ihnen bereitgestellten Informationen zu erleichtern. In diesem Fall können Sie dazu eine serverseitige Skriptsprache verwenden. Zum Beispiel (und ich liebe es absolut, solche Dinge zu tun):

styles.css.php:

body
 {
margin: 0px;
font-family: Verdana;
background-color: #cccccc;
background-image: url('<?php
echo 'images/flag_bg/' . $user_country . '.png';
?>');
 }

Dies würde das Hintergrundbild auf das setzen, was in der Variablen $ user_country gespeichert war . Dies ist nur ein Beispiel für dynamisches CSS. Beim Kombinieren von CSS und serverseitigem Code gibt es praktisch unbegrenzte Möglichkeiten. Ein anderer Fall wäre, dem Benutzer zu erlauben, ein benutzerdefiniertes Thema zu erstellen, es in einer Datenbank zu speichern und dann mit PHP verschiedene Eigenschaften festzulegen, wie zum Beispiel:

user_theme.css.php:

body
 {
background-color: <?php echo $user_theme['BG_COLOR']; ?>;
color: <?php echo $user_theme['COLOR']; ?>;
font-family: <?php echo $user_theme['FONT']; ?>;
 }

#panel
 {
font-size: <?php echo $user_theme['FONT_SIZE']; ?>;
background-image: <?php echo $user_theme['PANEL_BG']; ?>;
 }

Dies ist jedoch wiederum nur ein Beispiel, das von der Stange ist. Die Nutzung der Leistungsfähigkeit von dynamischem CSS über serverseitiges Scripting kann zu ziemlich unglaublichen Dingen führen.

IE unterstützt CSS- Ausdrücke :

width:expression(document.body.clientWidth > 955 ? "955px": "100%" );

Sie sind jedoch kein Standard und nicht über alle Browser hinweg portierbar. Vermeiden Sie sie wenn möglich. Sie sind seit IE8 veraltet .

Nicht im herkömmlichen Sinne des Ausdrucks "innerhalb von CSS".

Dies stellt sich als sehr interessante Frage heraus. Wenn über hundert Eigenschaften festgelegt sind, würden Sie denken, dass Sie .clickable {onclick: "alert ('hi!');" ;; } in Ihrem CSS, und es würde funktionieren. Es ist intuitiv, es macht so viel Sinn. Dies wäre erstaunlich nützlich beim Affen-Patching von dynamisch generierten massiven Benutzeroberflächen.

Das Problem:
Die CSS-Polizei hat in ihrer unendlichen Weisheit eine chinesische Mauer zwischen Präsentation und Verhalten gezogen . Jeder HTML-Code, der ordnungsgemäß beschriftet ist, wird von CSS absichtlich nicht unterstützt. ( Vollständige Eigenschaftentabelle )

Der beste Weg, dies zu umgehen, ist die Verwendung von jQuery, das im Hintergrund eine interpretierte Engine einrichtet, um das auszuführen, was Sie ohnehin mit dem CSS versucht haben. Siehe diese Seite: Hinzufügen von Javascript Onclick zur CSS-Datei .

Viel Glück.

Ich bin auf ein ähnliches Problem gestoßen und habe zwei eigenständige Tools entwickelt, um dies zu erreichen:

• CjsSS.js ist ein Vanilla Javascript-Tool (also keine externen Abhängigkeiten), das die Rückkehr zu IE6 unterstützt.

• ngCss ist ein Angular-Modul + Filter + Factory (auch bekannt als: Plugin), das Angular 1.2+ unterstützt (also zurück zu IE8).

Mit diesen beiden Tool-Sets können Sie dies in einem STYLE-Tag oder in einer externen * .css-Datei tun:

    /*<script src='some.js'></script>
    <script>
        var mainColor = "#cccccc";
    </script>*/

    BODY {
        color: /*{{mainColor}}*/;
    }

Und das in Ihren On-Page- styleAttributen:

    <div style="color: {{mainColor}}" cjsss="#sourceCSS">blah</div>

oder

    <div style="color: {{mainColor}}" ng-css="sourceCSS">blah</div>

HINWEIS: In ngCss können Sie dies auch $scope.mainColoranstelle von tunvar mainColor

Standardmäßig wird das Javascript in einem Sandbox-IFRAME ausgeführt. Da Sie jedoch Ihr eigenes CSS erstellen und es auf Ihrem eigenen Server hosten (genau wie Ihre * .js-Dateien), ist XSS kein Problem. Der Sandkasten bietet jedoch viel mehr Sicherheit und Sicherheit.

CjsSS.js und ngCss liegen irgendwo zwischen den anderen Tools, um ähnliche Aufgaben auszuführen:

• LESS , SASS und Stylus sind nur Präprozessoren und erfordern, dass Sie eine neue Sprache lernen und Ihr CSS entstellen. Grundsätzlich haben sie CSS um neue Sprachfunktionen erweitert. Alle sind auch auf Plugins beschränkt, die für jede Plattform entwickelt wurden, während Sie mit CjsSS.js und ngCss jede Javascript-Bibliothek <script src='blah.js'></script>direkt in Ihr CSS aufnehmen können!

• AbsurdJS sah die gleichen Probleme und ging genau die entgegengesetzte Richtung der Präprozessoren oben; Anstatt CSS zu erweitern, hat AbsurdJS eine Javascript-Bibliothek erstellt, um CSS zu generieren.

CjsSS.js und ngCss nahmen den Mittelweg ein; Sie kennen CSS bereits, Sie kennen Javascript bereits, also lassen Sie sie einfach auf einfache, intuitive Weise zusammenarbeiten.