Je suis encore nouveau sur CSS / Javascript / JQuery. Je définis quelques couleurs en tant que classes dans un fichier CSS. Ensuite, je veux utiliser l'un d'eux comme couleur de fond d'une page HTML:

.wf_blue { color:rgb(2, 12, 40); }
.wf_white { color:rgb(255, 252, 247); }

body{background-color: wf_blue;}

Ce qui précède ne fonctionne pas. J'ai essayé avec JQuery, mais sans succès. J'ai vu d'autres questions sur SO, mais je n'ai pas pu trouver la solution. Qu'est-ce que je fais mal?

1
Jérôme Verstrynge 23 oct. 2011 à 00:55

4 réponses

Meilleure réponse

Tout d'abord, le CSS doit être:

.wf_blue { background-color: rgb(2, 12, 40); }
.wf_white { background-color: rgb(255, 252, 247); }

En HTML simple

<body class="wf_blue">

Avec jQuery:

$(document).ready(function() {
  $("body").addClass("wf_blue");
});
1
Alex Peattie 22 oct. 2011 à 20:58

Vos classes ne peuvent être utilisées que dans le balisage HTML comme celui-ci

<body class="wf_blue">....

Alternative, vous pouvez définir cette classe avec jQuery

$('body').addClass('wf_blue');

Si vous souhaitez utiliser des variables en CSS, vous pouvez consulter SASS ou MOINS, qui sont des préprocesseurs CSS

3
topek 22 oct. 2011 à 20:57

Si vous ne souhaitez pas utiliser de bibliothèque javascript (comme jquery ou prototype), vous pouvez écrire directement: A. HTML:

 <body class="wf_blue">

Javascript:

 document.getElementsByTagName ('body') [0]. addClass ('wf_blue');

Merci

1
Facebiz 23 oct. 2011 à 13:03

Si vous souhaitez utiliser des variables en CSS, vous devez utiliser un langage intermédiaire, comme less ou Sass.

2
adho12 13 janv. 2014 à 15:40
7862536