Change Background color (css property) using Jquery

Question

I want to Change the background colour on click . This is my code work that i tried.pls help me out :)

   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">

$(document).ready(function(){

$(#co).click(change()
{
$(body).css("background-color":"blue");
});
});

Css code

body
{
background-color:red;
}

Body code

      <body>

    <div id="co" click="change()">

hello

    </div>

Sterling Archer · Accepted Answer · 2014-01-05 11:24:05Z

27

You're using a colon instead of a comma. Try:

$(body).css("background-color","blue");

You also need to wrap the id in quotes or it will look for a variable called #co

$("#co").click(change()

There are many more issues here. click isn't an HTML attribute. You want onclick (which is redundant). Try this:

<div id="co"> <!-- no onclick method needed -->
<script>
$(document).ready(function() {
    $("#co").click(function() {
        $("body").css("background-color","blue"); //edit, body must be in quotes!
    });
});
</script>

You were trying to call an undefined method. It looks like you were trying to declare it inside the callback statement? I'm not sure. But please compare this to your code and see the differences.

http://jsfiddle.net/CLwE5/ demo fiddle

edited Jan 5, 2014 at 11:24

answered Jan 5, 2014 at 11:06

Sterling Archer

22.5k19 gold badges86 silver badges121 bronze badges

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

5 Comments

Sterling Archer Over a year ago

Taking a second look.. there are issues everywhere in your code. I will update my answer

farvilain Over a year ago

Cannot edit the valid solution gived by RUJordan, it only need to close the script tag...

Sterling Archer Over a year ago

@SunnyCoder be more specific. What does the error console say? Not working doens't tell me much

Sterling Archer Over a year ago

Found it. body needs to be in quotes. See my edit, I included a working demo

Sterling Archer Over a year ago

@SunnyCoder because jQuery is handling the click event. So if you added the onclick back, it would be redundant.

Yuliam Chandra · Accepted Answer · 2014-09-06 05:41:07Z

3

Try this

$("body").css({"background-color":"blue"});

edited Sep 6, 2014 at 5:41

Yuliam Chandra

14.7k12 gold badges56 silver badges70 bronze badges

answered Sep 6, 2014 at 5:28

Sabash

1521 silver badge6 bronze badges

Comments

IVIajid · Accepted Answer · 2014-10-22 12:48:21Z

3

$("#co").click(function(){
   $(this).css({"backgroundColor" : "blue"});
});

answered Oct 22, 2014 at 12:48

IVIajid

1909 bronze badges

4 Comments

Bhavesh Odedra Over a year ago

please describe your answer so it'll make sense for all user.

IVIajid Over a year ago

what do you mean? when user clicks on the id named "co" the background color of that changes to blue!

Bhavesh Odedra Over a year ago

Totally agrees with you but for new user or fresher who don't know anything about css or jquery for them need description. Hope this make sense.

IVIajid Over a year ago

mmm... you're right but this user used jquery in the code. means he/she knows something about that :)

Script47 · Accepted Answer · 2015-11-28 15:58:18Z

1

The code below will change the div to blue.

<script>
 $(document).ready(function(){ 
   $("#co").click({
            $("body").css("background-color","blue");
      });
    }); 
</script>
<body>
      <div id="co">hello</div>
</body>

edited Nov 28, 2015 at 15:58

Script47

14.6k4 gold badges49 silver badges69 bronze badges

answered Oct 22, 2014 at 12:45

yuriy

212 silver badges8 bronze badges

1 Comment

iCollect.it Ltd Over a year ago

You are missing quotes around #co

fedorqui · Accepted Answer · 2014-10-22 13:02:49Z

0

1.Remove onclick method from div element

2.Remove function change() from jQuery code and in place of that create an anonymous function like:

$(document).ready(function()
{

  $('#co').click(function()
   {

  $('body').css('background-color','blue');
  });
});

edited Oct 22, 2014 at 13:02

fedorqui

293k112 gold badges592 silver badges640 bronze badges

answered Oct 22, 2014 at 12:40

vikash kumar

11 bronze badge

Comments

JRodDynamite · Accepted Answer · 2015-11-28 17:27:53Z

0

$("#bchange").click(function() {
    $("body, this").css("background-color","yellow");
});

edited Nov 28, 2015 at 17:27

JRodDynamite

12.7k5 gold badges47 silver badges68 bronze badges

answered Nov 28, 2015 at 16:10

OpenWebWar

6109 silver badges16 bronze badges

1 Comment

JRodDynamite Over a year ago

Your answer is under review for being a low quality answer. Please provide an explanation to your code.

Harpreet Singh · Accepted Answer · 2020-02-06 05:54:04Z

0

Change Background Color using on click button jquery

Below is the code of jquery, which you can put in your head tag.

jQuery Code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
      $("button").click(function(){
        $("div").addClass("myclass");
      });
    });
</script>

CSS Code:

<style>
    .myclass {
        background-color: red;
        padding: 100px;
        color: #fff;
    }
</style>

HTML Code:

<body>
    <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
    <button>Click Here</button>
</body>

answered Feb 6, 2020 at 5:54

Harpreet Singh

213 bronze badges

1 Comment

Makyen Over a year ago

Your profile indicates you're associated with the company that owns the site to which you have linked. Linking to something you're affiliated with (e.g. a product or website) without disclosing it's yours in your post is considered spam on Stack Exchange/Stack Overflow. See: What signifies "Good" self promotion?, some tips and advice about self-promotion, What is the exact definition of "spam" for Stack Overflow?, and What makes something spam.

RhysD · Accepted Answer · 2020-02-06 08:48:33Z

0

Try below jQuery snippet, you can change color :

<script type="text/javascript">
    $(document).ready(function(){
        $("#co").click(function() {
            $("body").css("background-color", "yellow");
        });
    });
</script>

$(document).ready(function(){
    $("#co").click(function() {
        $("body").css("background-color", "yellow");
    });
});

body {
    background-color:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="co" click="change()">hello</div>

edited Feb 6, 2020 at 8:48

RhysD

1,6973 gold badges18 silver badges31 bronze badges

answered Feb 6, 2020 at 7:40

Himanshu Joshi

2922 silver badges10 bronze badges

Collectives™ on Stack Overflow

Change Background color (css property) using Jquery

8 Answers 8

5 Comments

Comments

4 Comments

1 Comment

Comments

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

5 Comments

Comments

4 Comments

1 Comment

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related