Remove CSS applied by a click event

Question

So I'm having trouble toggling this switch to change the background color. Im not sure how to get it to remove the CSS that it applies to the document. I want it to toggle between to different colored backgrounds.

Here's my code:

<!Doctype html>
<html lang="en">
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <label class="switch"><input id="input" type="checkbox" /><div></div></label>
    </div>
    <footer>
        <script src="https://code.jquery.com/jquery-2.2.1.js"></script>
        <script type="text/javascript" src="js.js"></script>
    </footer>
</body>
</html>

The Styles:

html {
background: #878476;
}

.container {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
height: 40px;
margin: auto;
text-align: center;
}

.switch input {
position: absolute;
opacity: 0;
}

.switch {
display: inline-block;
font-size: 20px; /* 1 */
height: 1em;
width: 2em;
background: #BDB9A6;
border-radius: 1em;
}

.switch div {
height: 1em;
width: 1em;
border-radius: 1em;
background: #FFF;
box-shadow: 0 0.1em 0.3em rgba(0,0,0,0.3);
transition: all 300ms;
transition: all 300ms;
transition: all 300ms;
}

.switch input:checked + div {
transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}

And the JS:

$(document).ready(function() {
console.log( "Coffee Isn't strong enough for me to remember how to toggle the OnClick" );
$(".switch").on("click", function() {
    $("html").css("background", "blue");
});
});

try addClass() and removeClass()..

Lal
– Lal

2016-03-14 04:25:12 +00:00
Commented Mar 14, 2016 at 4:25 — Lal
– Lal, Commented Mar 14, 2016 at 4:25
Use .toggleClass()

Rayon
– Rayon

2016-03-14 04:25:14 +00:00
Commented Mar 14, 2016 at 4:25 — Rayon
– Rayon, Commented Mar 14, 2016 at 4:25
jsfiddle.net/rayon_1990/eLgqe2ya/1

Rayon
– Rayon

2016-03-14 04:55:14 +00:00
Commented Mar 14, 2016 at 4:55 — Rayon
– Rayon, Commented Mar 14, 2016 at 4:55

Nishanth Almeida · Accepted Answer · 2016-03-14 04:29:59Z

1

You can use toggle class here is link for more information http://api.jquery.com/toggleclass/

$("#input").on("click", function() {
    $("html").toggleClass("bck-change");
});

And also i've modified your code pls refer: https://jsfiddle.net/eLgqe2ya/

answered Mar 14, 2016 at 4:29

Nishanth Almeida

1481 silver badge4 bronze badges

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

2 Comments

Rayon Over a year ago

Why "#input" instead of .switch ?

Nishanth Almeida Over a year ago

That's because generally checkbox is the proper element to attach events to, not the label, and the change event would normally be the proper event to use, not click.

Collectives™ on Stack Overflow

Remove CSS applied by a click event

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related