CODEWITHSUNDEEP
javascriptcss
Zesty
Zesty

Reputation: 3001

How can I toggle a filter?

How can I toggle a filter correctly?

I need a function that will turn my page into inverted black and white. When I run the function again, it should return it to its original colors.

Here's what I have so far:

function ToggleAccessibility() {
    if (!blackAndWhite) {
        (function () {
            var body = document.body;
            body.style['filter'] = 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1 invert(100%))';
            if (!body.style['filter']) {
                body.style['-webkit-filter'] = 'grayscale(1) invert(100%)';
                body.style['filter'] = 'grayscale(1) invert(100%)';
            }
            blackAndWhite = true;
        }());
    }
    else {
        (function () {
            var body = document.body;
            body.style['filter'] = 'none';
            if (!body.style['filter']) {
                body.style['-webkit-filter'] = 'none';
                body.style['filter'] = 'none';
            }
            blackAndWhite = false;
        }());
    }
}

The first time the function runs, it correctly works to make the page inverted black and white. The second time, it correctly returns the screen to normal.

But after that it doesn't do anything. Setting the filter to 'none' seems to prevent any further changes to the page for some reason. I'm not sure what's the correct way to go about this.

Upvotes: 0

Views: 90

Answers (1)

Kashyap
Kashyap

Reputation: 391

.invert {
    filter: grayscale(1) invert(100%);
    -webkit-filter: grayscale(1) invert(100%);
}

<body class="invert"> <!-- Toggle invert class using javascript -->

Upvotes: 2

Related Questions