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!

Answer 1

You can use the filter CSS property.

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

See also: grayscale