How to send parameters from javascript to css

Question

I want to set the background image based on user selection.

Scenario:

User selects a color among color options. Based on this the background image must be changed like theme.

For example, if user selects red color background image should be image_red.png. If user changes the color to violet it should be image_violet.png.

There are multiple images like this the color of which should change according to user selection. So is there a way of setting it in css like background-image: url(../image_colorparameter.png)

Please see this article .This got what you want http://stackoverflow.com/questions/5195303/set-css-attribute-in-javascript — Amila Iddamalgoda, Mar 13 '14 at 05:24
Please see this article .This got what you want http://stackoverflow.com/questions/5195303/set-css-attribute-in-javascript http://stackoverflow.com/questions/2750710/setting-background-image-with-javascript — Amila Iddamalgoda, Mar 13 '14 at 05:26
if u just want to use change color of you can use background-color instead of using an image — Aditya Ponkshe, Mar 13 '14 at 05:29
the simple way: set a class or data-attrib on the body with the value of the user-selected color. then you can use pure css attrib selectors to change all sorts of rules by prefixing the normal selector with a, ex, "body[data-color='red'] " limiter. having just one line of JS simplifies coding while separating boundaries. — dandavis, Mar 13 '14 at 05:36

score 2 · Answer 1 · edited Jun 20 '20 at 09:12

Specific Classes

So, here's a nice way to do it if you have specific classes in mind:

http://jsfiddle.net/nbMdb/

(added background functionality for class names)

http://jsfiddle.net/nbMdb/2/

(additional proof of concept. Type your own dynamic image and it will populate.)

http://jsfiddle.net/nbMdb/3/

HTML:

<div id="thisThing"></div>

<input id="yellow" type="button" name="yellow" value="yellow" />
<input id="red" type="button" name="red" value="red" />
<input id="blue" type="button" name="blue" value="blue" />

CSS:

#thisThing {

    width:200px;
    height:200px;
}
.yellow {
    background:#FC2;
}
.blue {
    background:#00F;
}
.red {
    background:#F00;
}

jQuery:

$(function() {
    $('input').on('click', function() {
        var color = $(this).attr('id');
        $('#thisThing').removeClass();
        $('#thisThing').addClass(color);
    });
});

Obviously you'd change the classes from background to background:url(...) but I didn't have your images.

Additional note. No need to use ID if you don't want. value, name also work in this case. See here:

http://jsfiddle.net/nbMdb/1/

18bytes · Answer 2 · 2014-03-13T05:34:27.063

0

You can change the CSS properties using $.css() method. http://api.jquery.com/css/ Also you can retrieve the CSS property using the same method.

Following method will allow you to change the background image in a parametrized way based on user selection.

function changebackground(var color) {
   $('body').css('background-image','url(img/'+ color +'.jpg)');
}

edited Mar 13 '14 at 05:34

answered Mar 13 '14 at 05:27

18bytes

5,951
7
42
69

score 0 · Answer 3 · answered Mar 13 '14 at 06:20

0

One of simple way is to just assign image name as an id for option. Once any option is selected do :: var v = $("option").id(); $("body").css("background","url("+v+")");

answered Mar 13 '14 at 06:20

Pritam

1,288
5
23
40