it-swarm.com.de

Javascript in CSS verwenden

Ist es möglich, Javascript innerhalb von CSS zu verwenden?

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

66
HelpMe

IE und Firefox enthalten beide Möglichkeiten, JavaScript aus CSS auszuführen. Wie Paolo erwähnt, ist eine Möglichkeit in IE die expression-Technik, aber es gibt auch das unscheinbarere HTC-Verhalten , bei dem eine separate XML, die Ihr Skript enthält, über CSS geladen wird. Eine ähnliche Technik für Firefox gibt es mitXBL. Diese Techniken verwenden kein JavaScript aus CSS direkt, aber der Effekt ist der gleiche. 

HTC mit IE

Verwenden Sie eine CSS-Regel wie folgt:

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

und innerhalb dieser script.htc-Datei haben 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 Funktion main() für das Ereignis ondocumentready aus (bezogen auf die Bereitschaft des HTC-Dokuments).

XBL mit Firefox

Firefox unterstützt einen ähnlichen XML-Script-ausführenden Hack mit XBL.

Verwenden Sie eine CSS-Regel wie folgt:

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

und in deiner 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 innerhalb des Konstruktortags wird ausgeführt (eine gute Idee, um Code in einen CDATA-Abschnitt zu verpacken.)

In beiden Techniken wird der Code nicht ausgeführt, es sei denn, der CSS-Selektor stimmt mit einem Element im Dokument überein . Wenn Sie etwas wie body verwenden, wird es sofort beim Laden der Seite ausgeführt.

62
Zach

Ich denke, Sie denken an expressions oder "dynamische Eigenschaften" , die nur von IE unterstützt werden und Sie eine Eigenschaft auf das Ergebnis eines Javascript-Ausdrucks setzen können. Beispiel:

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

Dieser Code bewirkt, dass IE die max-width-Eigenschaft emuliert, die er nicht unterstützt.

Alle betrachteten Dinge sind jedoch Verwenden Sie diese nicht. Sie sind eine schlechte, schlechte Sache.

35

Um die Lösung Ihrer Probleme zu erleichtern, gehen Sie davon aus, dass Sie dynamisches CSS suchen. In diesem Fall können Sie 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 ist. Dies ist nur ein Beispiel für dynamisches CSS. Die Kombination von CSS und serverseitigem Code bietet nahezu unbegrenzte Möglichkeiten. Ein anderer Fall wäre beispielsweise, dem Benutzer zu erlauben, ein benutzerdefiniertes Design zu erstellen, es in einer Datenbank zu speichern und dann mit PHP verschiedene Eigenschaften festzulegen, z.

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 wieder nur ein Beispiel, das nicht auf dem neuesten Stand ist. Die Nutzung von dynamischem CSS über serverseitiges Scripting kann zu erstaunlichen Ergebnissen führen.

4
Hexagon Theory

IE unterstützt CSS -Ausdrücke:

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

sie sind jedoch kein Standard und können nicht von Browsern übertragen werden. Vermeiden Sie sie wenn möglich. Sie sind veraltet seit IE8 .

2
sastanin

Ich bin auf ein ähnliches Problem gestoßen und habe dazu zwei eigenständige Tools entwickelt:

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

  • ngCss ist ein Angular Module + Filter + Factory (alias: plugin), das Angular 1.2+ unterstützt (also zurück zu IE8)

Mit diesen beiden Werkzeugsätzen können Sie dies in einem STYLE-Tag oder in einer externen * .css-Datei ausführen:

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

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

Und dies in euren On-Page-Attributen style:

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

oder

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

HINWEIS: In ngCss können Sie anstelle von $scope.mainColor auch var mainColor ausführen.

Standardmäßig wird Javascript in einem Sandkasten-IFRAME ausgeführt. Da Sie jedoch Ihr eigenes CSS erstellen und auf Ihrem eigenen Server hosten (genau wie Ihre * .js-Dateien), ist XSS kein Problem. Die Sandbox 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 alles Vorgänger und erfordern, dass Sie eine neue Sprache lernen und Ihr CSS manipulieren. Grundsätzlich haben sie CSS um neue Sprachfunktionen erweitert. Alle sind auch auf Plugins beschränkt, die für jede Plattform entwickelt wurden. Mit CjsSS.js und ngCss können Sie jede Javascript-Bibliothek über <script src='blah.js'></script> direkt in Ihr CSS einbinden!

  • AbsurdJS sah die gleichen Probleme und ging genau in die entgegengesetzte Richtung der Preprocessors oben; Anstatt CSS zu erweitern, erstellte AbsurdJS eine Javascript-Bibliothek, um CSS zu generieren.

CjsSS.js und ngCss nahmen den Mittelweg ein; Sie kennen bereits CSS, Sie kennen bereits Javascript. Lassen Sie sie einfach und intuitiv zusammenarbeiten.

0
Campbeln