CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user2875178
user2875178

Reputation: 91

Change Specific Div background color by clicking on a link

how are you guys?! well I have a question. I have a link on top of a div called "section2" what I need is to change the Div background color on hover and keep that new color until you hover on link number two, background color of that div should change. I don't need to change the background color of the Link, I just need to change dinamically the background color of the div from behind. 

<script language="javascript">

$(function(){
$("#changer").on("click",function(e){
e.preventDefault();
var body = document.getElementById("section2"),
    green = "rgb(0, 128, 0)",
    white = "rgb(255, 255, 255)";

if(body.css("backgroundColor") !== green){
  body.css("backgroundColor",green);
}else{
  body.css("backgroundColor",white);
}
});
})

</script>

and the html

<div id="section2" align="center">
    <a href="#" id="changer">Click me</a>
</div>

Upvotes: 1

Views: 295

Answers (5)

yangkwak
yangkwak

Reputation: 23

Following approached worked,

$(function() {
    $("#changer").on("click",function(e){
        e.preventDefault();
        var body = $("#section2");
        if(body.css("background-color").indexOf("rgb(0, 128, 0)") == -1 ) {                             
            body.css("background-color","rgb(0, 128, 0)");
        }else{
          body.css("background-color","rgb(255, 255, 255)");
        }
    });
})

Upvotes: 0

Henrique Schreiner
Henrique Schreiner

Reputation: 185

Try to control $("#section2") background-color property using CSS classes:

#section2.green {
  background-color: green;
}

#section2.white {
  background-color: white;
}

So, using jQuery to add background-color:

$(function () {
    $("#changer").on("click", function (e) {
        e.preventDefault();

        var body = $("#section2");

        if (body.hasClass('green')) {
            body.removeClass('green')
              .addClass('white');
        } else {
            body.removeClass('white')
              .addClass('green');
        }
    });
})

Upvotes: 0

dfsq
dfsq

Reputation: 193261

Native HTML elements don't have css method, this is jQuery one. So your code for body should be:

var body = $("#section2"),

Entire demo:

$(function () {
    $("#changer").on("click", function (e) {
        e.preventDefault();
        var body = $("#section2"),
            green = "rgb(0, 128, 0)",
            white = "rgb(255, 255, 255)";

        if (body.css("backgroundColor") !== green) {
            body.css("backgroundColor", green);
        } else {
            body.css("backgroundColor", white);
        }
    });
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="section2" align="center">
    <a href="#" id="changer">Click me</a>
</div>

However comparing CSS property value for background color is very unreliable. You would better compare/check classes:

$("#changer").on("click", function (e) {
    e.preventDefault();
    $("#section2").toggleClass('green white');
});
.green {background-color: rgb(0, 128, 0);}
.white {background-color: rgb(255, 255, 255);}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="section2" class="white" align="center">
    <a href="#" id="changer">Click me</a>
</div>

Upvotes: 2

Ahs N
Ahs N

Reputation: 8366

This is how I did it:

$(function () {
    $('#changer').hover(function () {
        $('#section2').css('background-color', 'yellow');
    });

    $('#reset').hover(function () {
        $('#section2').css('background-color', 'red');
    });
})

Here is the JSFiddle demo

Upvotes: 0

Brian Gerhards
Brian Gerhards

Reputation: 849

Reference the items using JQuery as so:

$(function () {
    $("#changer").on("click", function (e) {
        e.preventDefault();

        var body = $("#section2"),
            green = "rgb(0, 128, 0)",
            white = "rgb(255, 255, 255)";

        if (body.css("backgroundColor") !== green) {
            body.css("backgroundColor", green);
        } else {
            body.css("backgroundColor", white);
        }
    });
})

Upvotes: 0

Related Questions