Verwenden von Javascript in CSS

73

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

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

javascript  css 
— james.garriss
quelle
3
In den folgenden Vorschlägen werden Ausdrücke in Internet Explorer erwähnt. Verwenden Sie diese NICHT.
— Sampson
5
Ausdrücke im IE sind böse - sie werden bei jedem einzelnen Ereignis neu bewertet (Mausbewegung, jemand?). Daher werden sie überall dort, wo sie nicht im Internet Explorer sind, stillschweigend versagen. Im Internet Explorer verlangsamen sie die Seite erheblich.
— Piskvor verließ das Gebäude am

Antworten:

64

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.

— Zach
quelle
7
(Ich bin mir nicht sicher, ob es hilfreich ist, nach einer alten Antwort zu fragen.) Ich habe die XBL-Technik in Firefox 18 ausprobiert, aber sie hat nicht funktioniert. Ist es nur für Firefox-Erweiterungen zugänglich?
— Sunil Agrawal
3
Ebenfalls erwähnenswert - HTML-Komponenten werden im IE nach Version 10
— Doug
6
Ab 2016 kann XBL nicht mehr über HTTP geladen werden.
— JSmyth
1
@JSmyth was ist mit ꜰᴛᴘ und Daten ᴜʀɪ?
— user2284570
@ user2284570 Habe es noch nicht ausprobiert, aber diese Seite sagt: Note: XBL cannot be loaded over HTTP, so this technique is only useful for local content accessed using the file:/// scheme, or from add-on code.Es würde mich interessieren, ob du es über data-uri / ftp / etc. zum Laufen bringen kannst. Dies würde möglicherweise eine CORS-Umgehung bedeuten.
— JSmyth
35

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.

— Paolo Bergantino
quelle
Schlüsselteil dort "nur vom IE unterstützt"; Sofern diese CSS-Datei nicht über einen bedingten Kommentar aufgenommen wird, sollte sie vermieden werden.
— Geowa4
Es sollte auf jeden Fall vermieden werden: developer.yahoo.com/performance/rules.html#css_expressions
— Gumbo
1
Beachten Sie auch, dass der Standardmodus IE8 auch keine Ausdrücke in CSS unterstützt.
— AnthonyWJones
2
'nur vom IE unterstützt' ... ich bin raus.
— Daft
5

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.

— Hexagon-Theorie
quelle
1
stimme für Coolness, aber das ist serverseitig. JS ist clientseitig.
— DragonLord
Stellen Sie sicher, dass Sie das Caching aktivieren, indem Sie einige Header senden, da Sie sonst das Laden einer Seite unnötig verlangsamen.
— Lekensteyn
Das ist statisch. Es werden lediglich Serverressourcen verbraucht, die mithilfe von Javascript auf den Client verschoben werden können.
2

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 .

— Sastanin
quelle
0

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

— Hank Gay
quelle
4
Je mehr Zeit vergeht, desto besser ist diese Antwort.
— Jasen
1
Ein Hallo aus der Zukunft
— Joel H
0

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.

— Drachen Lord
quelle
1
Diese Antwort ist falsch und liefert keine Erklärung / Begründung für die Behauptung, dass es unmöglich ist, Javascript in CSS zu integrieren. In der Tat, die anderen früheren Antworten tun Möglichkeiten bieten Javascript innerhalb CSS zu setzen (nicht tragbar, nicht auf vielen Browsern unterstützt, aber in einigen Fällen ist es ist möglich).
— DW
0

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.

— Campbeln
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.