How do I change the grayscale of an iframe using DOM (object.style)?

Question

I need to change the grayscale to 100% of an iframe after a certain button is pressed. Here is a basic version of a part of my code:

HTML:

                    <tr>
                        <td>
                            <p class = "text">
                                Would you like to turn the colors into black and white?
                            </p>
                        </td>
                        <td>
                            <input type = "radio" id = "blackandwhiteyes" name = "blackandwhite" value = "blackandwhiteyes" required>
                        </td>
                        <td>
                            <input type = "radio" id = "blackandwhiteno" name = "blackandwhite" value = "blackandwhiteno" required>
                        </td>
                    </tr>

JavaScript:

blackandwhiteyes.onclick = function () {
    numiframe.style.(*What do I enter here to make the grayscale change?*);
}

Thanks in advance!

Do you have control of the iframes source code? If not you really can't without getting real hacky, see [here](https://stackoverflow.com/questions/217776/how-to-apply-css-to-iframe). If you have control of the iframe you can use CSS to change the the entire page to [greyscale](http://jsfiddle.net/Lgyg2a4r/19/). — apena, Jul 24 '20 at 00:59

score 1 · Accepted Answer · answered Jul 23 '20 at 22:52

1

You can use the filter CSS property.

numiframe.style.filter = "grayscale(100%)";

How do I change the grayscale of an iframe using DOM (*object*.style)?

1 Answers1

How do I change the grayscale of an iframe using DOM (object.style)?