CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jérôme Verstrynge
Jérôme Verstrynge

Reputation: 59576

How to set a background color defined as a CSS class (using JQuery eventually)?

I am still new to CSS/Javascript/JQuery. I am defining a couple of colors as classes in a css file. Then, I want to use one of them as the background color of a HTML page:

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

body{background-color: wf_blue;}

The above does not work. I tried with JQuery, but unsuccessfully. I have seen other questions on SO, but could not figure out the solution. What am I doing wrong?

Upvotes: 1

Views: 3301

Answers (4)

Erik Funkenbusch
Erik Funkenbusch

Reputation: 93424

If you want to use variables in CSS, then you have to use an intermediate language, like less or Sass.

Upvotes: 2

Facebiz
Facebiz

Reputation: 125

If you do not want to use a javascript library (such as jquery or prototype), you can write directly: A. HTML:

 <body class="wf_blue">

B. javascript:

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

thanks

Upvotes: 1

Alex Peattie
Alex Peattie

Reputation: 27647

First, the CSS should be:

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

In plain HTML

<body class="wf_blue">

With jQuery:

$(document).ready(function() {
  $("body").addClass("wf_blue");
});

Upvotes: 1

topek
topek

Reputation: 18979

your classes can only be used in the HTML markup like this

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

Alternative you can set this class with jQuery

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

If you would like to use variables in CSS, you can take a look at SASS or LESS, which are CSS preprocessors

Upvotes: 3

Related Questions