Does anyone know how to disable a SVG using JavaScript?

Question

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?

Answer 1

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>

Answer 2

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";