JQuery changing css background color

Question

i just stared working with JQuery for the first time and i have a simple question about changing css, this is my current code but i would like to be able to prompt for the color how can this be achieved?

$(document).ready(function() {
    $("#change").click(function() {
        $("#container").css("background-color", "blue");
});

ive tried this:

<input id="colorInput" type="text"/>

$(document).ready(function() {
    $("#change").click(function() {
        $("#container").css("background-color", #colorInput);
});

And alot of other ways but nothing seems to work.

What do you mean "prompt", generally that means something like this -> jsfiddle.net/a3vX6 — adeneo
– adeneo, Commented Mar 6, 2014 at 12:42

MysticMagicϡ · Accepted Answer · 2014-03-06 12:33:22Z

1

Change

$("#container").css("background-color", #colorInput);

to

$("#colorInput").css("background-color", "#ff0000");

id or class of element to be effected will be in selector.

Here is a fiddle.

answered Mar 6, 2014 at 12:33

MysticMagicϡ

28.8k16 gold badges77 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Anoop Joshi P · Accepted Answer · 2014-03-06 12:34:14Z

1

try

$(document).ready(function() {
$("#change").click(function() {
$("#container").css("background-color", $("#colorInput").val());
});

You can get the value from that input using

$("#colorInput").val()

answered Mar 6, 2014 at 12:34

Anoop Joshi P

25.6k9 gold badges35 silver badges54 bronze badges

1 Comment

MysticMagicϡ Over a year ago

@user3142531 accept Anoop's answer if that worked :) so the question can be removed from unanswered questions' list.

Amit · Accepted Answer · 2014-03-06 12:34:42Z

0

If your colorinput is like as #FF00AA then use as below

 $("#container").css("background-color", $("#colorInput").val());

else use as below:

 $("#container").css("background-color", "#"+$("#colorInput").val());

answered Mar 6, 2014 at 12:34

Amit

15.4k8 gold badges49 silver badges69 bronze badges

Comments

Himanshu · Accepted Answer · 2014-03-06 12:42:08Z

0

created something on jsfiddle.

check the link : http://jsfiddle.net/SE5R2/2/

$(document).ready(function () { $('#change').click(function () { $('#box').css({ 'background-color': '#' + $('#color').val() }); }); });

answered Mar 6, 2014 at 12:42

Himanshu

11 bronze badge

Collectives™ on Stack Overflow

JQuery changing css background color

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related