CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Sanjay B
Sanjay B

Reputation: 211

Change Background color (css property) using Jquery

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>

Upvotes: 14

Views: 109702

Answers (8)

Himanshu Joshi
Himanshu Joshi

Reputation: 292

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>

Upvotes: 0

Harpreet Singh
Harpreet Singh

Reputation: 21

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>

Upvotes: 0

OpenWebWar
OpenWebWar

Reputation: 610

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

Upvotes: 0

yuriy
yuriy

Reputation: 21

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>

Upvotes: 1

vikash kumar
vikash kumar

Reputation: 1

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');
  });
});

Upvotes: 0

IVIajid
IVIajid

Reputation: 190

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

Upvotes: 3

Sabash
Sabash

Reputation: 152

Try this

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

Upvotes: 3

Sterling Archer
Sterling Archer

Reputation: 22425

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

Upvotes: 27

Related Questions