Does anyone know how to disable a SVG using JavaScript?-CodePudding

I've been trying to use something in JS like:

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

However, this does not work and the = has a red underline. Any ideas?

CodePudding user response：

Attribute names need to written in camelCase like so:

pointer-events => pointerEvents

<svg id="dartboard" width="100px" height="100px" viewBox="0 0 100 100">
  <circle cx="50%" cy="50%" r="25%" fill="red" stroke="green"/>
</svg>

<script>
  let dartboard = document.getElementById("dartboard");
  dartboard.addEventListener('click', function(e) {
    alert('click');
  })

  dartboard.style.strokeWidth = 10;
  dartboard.style.pointerEvents = "none";
</script>

CodePudding user response：

You can change the css properties from javascript, as it is described here: https://www.w3schools.com/js/js_htmldom_css.asp

var obj = document.getElementById("container");
obj.style.pointer-events = "none";