À l'aide de Javascript dans le CSS

IE et Firefox contiennent tous les deux façons d'exécuter le code JavaScript de feuille de style CSS. Comme Paolo mentionne, d'une façon de savoir est la expression technique, mais il y a aussi les plus obscurs HTC comportement, dans lequel un autre format XML qui contient votre script est chargé via CSS. Une technique similaire pour Firefox existe, à l'aide XBL. Ces techniques ne sont pas exectue JavaScript CSS directement, mais l'effet est le même.

HTC avec IE

Utiliser une règle CSS comme ceci:

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

et dans ce script.fichier htc avoir quelque chose comme:

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

Le fichier HTC exécute la main() fonction de l'événement ondocumentready (en se référant à la HTC document de préparation.)

XBL avec Firefox

Firefox prend en charge une semblable XML-script-de l'exécution de hack, en utilisant XBL.

Utiliser une règle CSS comme ceci:

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

et à l'intérieur de votre 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>

Tout le code dans le constructeur de la balise sera exécuté (une bonne idée de placer le code dans une section CDATA.)

Dans les deux techniques, le code n'est pas exécuté, à moins que le sélecteur CSS correspond à un élément dans le document. En utilisant quelque chose comme body, il exécutera immédiatement au chargement de la page.

Pour faciliter éventuellement la résolution de votre problème donné les informations que vous avez fournies, je vais supposer que vous êtes à la recherche d'CSS dynamique. Si c'est le cas, vous pouvez utiliser un serveur langage de script côté pour le faire. Par exemple (et j'adore faire des choses comme cela):

styles.css.php:

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

Ce serait l'image d'arrière-plan pour tout ce qui était stocké dans le $user_country variable. Ce n'est qu'un exemple de CSS dynamique; il n'y a pratiquement infinies possibilités lors de la combinaison de CSS et le code côté serveur. Un autre cas serait de faire quelque chose comme permettant à l'utilisateur de créer un thème personnalisé, de les stocker dans une base de données, puis à l'aide de PHP de régler diverses propriétés, comme suit:

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']; ?>;
 }

Mais, encore une fois ce n'est qu'un hors-la-haut-de-la-tête exemple, en exploitant la puissance des CSS dynamique via des scripts côté serveur peut conduire à certains assez incroyable.

J'ai rencontré un problème similaire et ont développé deux outils autonomes pour ce faire:

• CjsSS.js est à la Vanille, Javascript outil (donc pas de dépendances externes) qui prend en charge revenir à IE6.

• ngCss Angulaire Module+Filtre+Usine (aka: plugin) qui prend en charge Angulaire 1.2+ (donc retour à IE8)

Ces deux ensembles d'outils vous permettent de faire cela dans un STYLE à une balise ou à l'intérieur d'un externe *.fichier css:

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

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

Et ce dans votre page style attributs:

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

ou

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

REMARQUE: Dans ngCss, vous pouvez aussi faire $scope.mainColor en place de var mainColor

Par défaut, le code Javascript est exécuté dans un bac à sable de l'IFRAME, mais puisque vous êtes l'auteur de votre propre feuille de style CSS et de l'héberger sur votre propre serveur (tout comme votre *.js fichiers) puis XSS n'est pas un problème. Mais le bac à sable offre beaucoup plus de sécurité et de la paix de l'esprit.

CjsSS.js et ngCss se situent quelque part entre les autres outils autour d'accomplir des tâches similaires:

• MOINS, SASS et Stylet sont tous les Préprocesseurs seulement et vous obliger à apprendre une nouvelle langue et de la mutilation de votre CSS. Fondamentalement, ils ont étendu CSS avec les nouvelles fonctionnalités du langage. Tous sont également limités à des plugins développés pour chaque plate-forme, tandis que CjsSS.js et ngCss les deux vous permettent de comprendre toute la bibliothèque Javascript via <script src='blah.js'></script> directement dans votre CSS!

• AbsurdJS vu les mêmes problèmes et est allé à l'exact opposé de la direction de la Préprocesseurs ci-dessus; plutôt que de l'étendre CSS, AbsurdJS créé une bibliothèque Javascript pour générer des feuilles de style CSS.

CjsSS.js et ngCss pris au milieu de la terre; vous avez déjà des connaissances en CSS, vous savez déjà Javascript, il suffit donc de laisser-leur de travailler ensemble de façon simple et intuitive.

Pas dans tous les sens conventionnel de l'expression "à l'intérieur de CSS."