Removing one style from div insead of whole style with click-CodePudding

I have a canvas div like this

`<div id="canvas" style="pointer-events:none;">`

I have a button that when pressed removes the style

`<input id="" onclick="qqq()"  type="button" name="test" value="test"/>`

    function qqq() {
    document.getElementById("canvas").removeAttribute("style");
    alert("I was ran");
    
      }

Is there a eazy way to make it to change the pointer event from none to null instead of removing the style??? I cant find another way to do it. I tried using disabled=disabled and yes im aware to change onclick to event listener.

CodePudding user response：

Access the style property of the element once you find it, and then alter it to your liking:

function qqq() {
    document.getElementById("canvas").style.pointerEvents = null;
    alert("I was ran");
    
}

CodePudding user response：

The best way is to simply remove or toggle (depending on your specific case) a custom utility class like no-pointer:

const togglePointerEvents = () => {
  document.querySelector("#canvas").classList.toggle("no-pointer");
};

document.querySelector("#togglePointerEvents").addEventListener("click", togglePointerEvents);

.no-pointer {
  pointer-events: none;
  background: red;
}

<div id="canvas" >Some DIV element</div>
<button id="togglePointerEvents">Toggle pointer events</button>

Or, instead of toggle use classList.remove("no-pointer"), you get the idea.
Also, don't use HTML inline on* handlers. Use addEventListener instead. JS is supposed to be in one place and that's the respective tag or file. Not disseminated in HTML.

CodePudding user response：

It is not recommended to leave inline styles in the tag unless they are needed, as they have the highest priority. It is a good practice to use css classes with the necessary styles instead. Therefore, there are two options:

add/remove a class (recommended)
remove the style attribute or change its content (not recommended)

const toggleNoEvents = () => {
  const canvasId = document.querySelector('#canvas');
  canvasId.classList.toggle('no_events');
};

.no_events {
  pointer-events:none;
  /* to test */
  user-select:none;
}

<div id="canvas" >test</div>

<button onclick='toggleNoEvents()'>Toggle no events</button>

CodePudding user response：

when a user checks the box they can use the canvas then they don't check the box they cannot use the canvas this is what worked for me kinda a buggy I had to use '' on one and not the other to get it too work. and even then its pointerEvents and not pointer-events..

function signatureClear() {
document.getElementById("canvasWrap").style.pointerEvents = 'none';
}

off

function qqq() {
document.getElementById("canvasWrap").style.pointerEvents = null;
}