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?
Pointer events are DOM events that are fired for a pointing device. They are designed to create a single DOM event model to handle pointing input devices such as a mouse, pen/stylus or touch (such as one or more fingers). The pointer is a hardware-agnostic device that can target a specific set of screen coordinates.
Using pointer-events: none will disable all mouse interactions with that element. If you wanted to change the cursor property, you would have to apply the changes to the parent element. You could wrap the link with an element and add the cursor property to it.
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";
You can access style properties via Bracket notation like this:
document.getElementById("div").style['pointer-events'] = 'auto';
No need in camel case modification in this case.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With