CODEWITHSUNDEEP
javascriptjqueryajaxhtmlcss
user3098536
user3098536

Reputation:

Invert complete webpage colors and reverse them with single toggle button

I need help to make this JSFiddle to reverse the color inversion I have tried many methods and tricks but failed somehow everytime.

JSFIDDLE LINK

above is the link to the jsfiddle which I would like to use on my website the same button should reverse the function but it isn't doing so i think there is some kind of error in it.

Upvotes: 1

Views: 1989

Answers (2)

Qwertiy
Qwertiy

Reputation: 21410

Specify html and body height and white background instead of transparent:

$("button").click(function () {
  $("html").toggleClass("inversed");
});
html, body {
  background: white;
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  padding: 1em;
}

.inversed {
  -webkit-filter: invert(100%);
  filter: invert(100%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Inverse</button>

Upvotes: 0

KWeiss
KWeiss

Reputation: 3144

Instead of adding the style to the header, apply it directly to the <html> element. Then you can remove it again easily by putting something like this inside the negativar function:

var html = document.getElementsByTagName('html');

if (html.getAttribute('style')) {
    html.setAttribute('style', '');
} else {
    html.setAttribute('style', 'YOUR STYLE HERE')
}

Upvotes: 1

Related Questions