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 stackoverflow.com/questions/5195303/… — Amila Iddamalgoda
– Amila Iddamalgoda, Commented Mar 13, 2014 at 5:24
Please see this article .This got what you want stackoverflow.com/questions/5195303/… stackoverflow.com/questions/2750710/… — Amila Iddamalgoda
– Amila Iddamalgoda, Commented Mar 13, 2014 at 5:26
if u just want to use change color of you can use background-color instead of using an image — Aditya Ponkshe
– Aditya Ponkshe, Commented Mar 13, 2014 at 5: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
– dandavis, Commented Mar 13, 2014 at 5:36

Community · Accepted Answer · 2020-06-20 09:12:55Z

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 · Accepted Answer · 2014-03-13 05:34:27Z

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, 2014 at 5:34

answered Mar 13, 2014 at 5:27

18bytes

6,0597 gold badges47 silver badges69 bronze badges

Comments

Pritam · Accepted Answer · 2014-03-13 06:20:00Z

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, 2014 at 6:20

Pritam

1,4105 gold badges26 silver badges41 bronze badges

Collectives™ on Stack Overflow

How to send parameters from javascript to css

3 Answers 3

Specific Classes

http://jsfiddle.net/nbMdb/

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

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

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

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Specific Classes

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related