CODEWITHSUNDEEP
javascriptjquery
open source guy
open source guy

Reputation: 2787

How can i change all color with jquery?

I want to replace all #111 color (example color) with #222 (new color) in html file using jQuery. I want to do this to change the theme of website by single click.

Initial css:

body{
    bg-color:#111;
    color:#111;
}
div1{
    bg-color:#111;
    color:#111;
}
.
.
.
divn{
    bg-color:#111;
    color:#111;
}

After click event:

body{
    bg-color:#222;
    color:#222;
}
div1{
    bg-color:#222;
    color:#222;
}
.
.
.
divn{
    bg-color:#222;
    color:#222;
}

Upvotes: 0

Views: 385

Answers (4)

Polmonite
Polmonite

Reputation: 943

If you can toggle between classes I think it will be better; if you can't/don't want you can use the .filter function in jQuery:

$('yourselector').filter(function(){
    return $(this).css('color')=='rgb(0, 1, 17)';
}).css('color','rgb(0, 2, 34)');

This will change all elements selected by yourselector with color rgb(0, 1, 17) to color rgb(0, 2, 34).

Obviously you can also do the same with other css attributes.

Upvotes: 0

Samich
Samich

Reputation: 30115

The best solution here is to define 2 css classes with cascaded styles to nested elements.

body { color:#111 }
.theme1 { color: #222; }
.theme2 { color: #333; }
.theme2 a { color: #003366; }
...

Then you can change the css class of your body element and all elements on the page will inherit new styles.

// theme1 color
<body class="theme1">
...
</body>

// theme2 color
<body class="theme2">
...
</body>

jquery code:

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

Upvotes: 6

mr_lewjam
mr_lewjam

Reputation: 1190

the proper way to do this would be to assign a css class to every html element you want to change color.

HTML:

<div class="colorChange">

CSS:

.colorChange{ color:#111;}

Then you would have a button that triggers a javascript function, which would change the color attribute of the colorChange class, I would recommend using jQuery:

$(".colorChange").css('color', '#222');

Upvotes: 0

Mateusz Rogulski
Mateusz Rogulski

Reputation: 7445

The best way to change theme with one click is give some class to your body tag.

Then in your css:

body{ color: #111;}
body.secondTheme{color : #222; }

And you can bind change it for click event in jquery

$("#yourButton").click(function() {
    $("body").toggleClass("secondTheme");
});

Upvotes: 1

Related Questions