CODEWITHSUNDEEP
javascriptcssonclick
Alnas Mohammed
Alnas Mohammed

Reputation: 1

change background color of div using css

Is it possible to change the background color of a div using css?

Code so far:

CSS

.div{
background-color: #000;
}

.live .div:not{
background-color: #ddd;
}

Javascript

function change(){
$("body").addClass("live");
}

HTML

<div onclick="change()">change</div>
<div>...</div>

Upvotes: 0

Views: 5678

Answers (4)

Zac
Zac

Reputation: 1009

Everyone seems to be confused about what you're trying to accomplish. @fedxc probably has the right solution. But if you're trying to change the color only of the div that was clicked, this will do it:

HTML:

<body>
    <div>
        Change this div!
    </div>
</body>

CSS:

div{
    background-color: #000;
    color: white;
}

div.live{
    background-color: #ccc;
}

Javascript:

$("div").click(function(){
    $(this).addClass('live');
});

Live example here: http://jsfiddle.net/7rbdg/1/

Upvotes: 1

fedxc
fedxc

Reputation: 195

If I understood correctly what you want to do is change the body background color when you click the DIV.

Since you are using jQuery I would trigger the background color change with a .click() function on the DIV.

HTML

<body>
    <div class="div">
        Change my world!
    </div>
</body>

CSS

.div{
background-color: #000;
color: white;
}

JavaScript

$(".div").click(function(){
    $("body").css("background-color", "#ddd");
});

Here is a live example.

Upvotes: 0

eshellborn
eshellborn

Reputation: 11261

Looks good what you're doing, just make sure to use background-color. I made a thing that does that with a random color, if it helps. http://gascalculator.ca/randomcolor

I used pure javascript though, I'm not familiar with jquery

Upvotes: 0

abiessu
abiessu

Reputation: 1927

Use the following:

.div{
  background-color: #000;
}

.live .div:not{
  background-color: #ddd;
}

Also, are you going to use <div class="div">...</div> somewhere in your code?

Upvotes: 0

Related Questions