Question 35715 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Removing one style from div insead of whole style with click – Jquery

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()" class="button_text" 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.

Tags:

4

Answers


  1. Chosen as BEST ANSWER
    0

    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..

    on

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

    off

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

  2. 0

    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");
    
}
    Login or Signup to reply.
  3. 0

    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" class="no-pointer">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.

    Login or Signup to reply.
  4. 0

    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" class="no_events">test</div>

<button onclick='toggleNoEvents()'>Toggle no events</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search