如何点击按钮修改div的pointer-events样式而非移除整个style属性？

我有一个如下所示的canvas div：

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

还有一个点击时会触发样式移除操作的按钮：

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

当前对应的JavaScript函数如下：

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

请问有没有简便方法，仅将pointer-events从none改为null，而非移除整个style属性？我试过使用disabled=disabled，也了解可以用事件监听器替代onclick。

当然有，给你几种简便的实现方式：

• 直接清空行内样式属性值：
  修改你的qqq函数，把移除整个style的代码替换成这一行即可：

  document.getElementById("canvas").style.pointerEvents = "";
  

  把属性值设为空字符串，浏览器会自动恢复该CSS属性的默认行为，和设置为null的效果一致。

• 使用removeProperty移除指定属性：
  如果你想彻底从行内样式中删掉pointer-events这一项，可以用这个方法：

  document.getElementById("canvas").style.removeProperty("pointer-events");
  

• 明确设置为默认值：
  pointer-events的默认值是auto，也可以直接写：

  document.getElementById("canvas").style.pointerEvents = "auto";
  

  这种写法更直观，明确恢复元素的默认交互能力。

另外补充：disabled属性只适用于表单元素（比如按钮、输入框），对div这类普通元素不起作用，所以之前的尝试没有效果是正常的。

内容的提问来源于stack exchange，提问作者qwerty321