JavaScript setting pointer-events

Issue

I am trying to set pointer-events: none for a div through JavaScript, however the property is not being applied.

I have tried:

document.getElementById("div").setAttribute("pointer-events", "none");

And:

document.getElementById("div").style.pointer-events = "none";

But neither worked, any ideas?

Solution

Your first attempt failed because it was a CSS property and not an attribute (part of the style attribute).

Your second attempt failed because for some off reason, when making this API casing-like-this gets converted to camelCasingLikeThis . This is likely because the folks who built JavaScript and the folks who built CSS weren't very well coordinated.

The following should work:

document.getElementById("div").style.pointerEvents = "none";

Answered By - Benjamin Gruenbaum