如何使用JavaScript禁用SVG？代码等号标红不生效如何解决

你的代码报红、无法生效有两个核心原因：

• 语法规则不匹配：JavaScript 操作 DOM 元素的 style 对象时，带连字符（-）的 CSS 属性不能直接以原名作为属性名访问。连字符在 JS 语法中是减号运算符，无法作为标识符的组成部分，因此编辑器会直接在等号位置抛出语法错误。pointer-events 这类带横杠的 CSS 属性，在 JS style 对象中需要改写为小驼峰格式的 pointerEvents 才能被正确识别。
• 方法调用缺少上下文：getElementById 是 document 对象下的内置方法，直接裸调用该方法在常规页面作用域下会触发“函数未定义”的运行时错误。

修正属性名写法、补全方法调用前缀即可，正确可运行的代码如下：

document.getElementById("dartboard").style.pointerEvents = "none";

上述代码只会屏蔽SVG元素的鼠标/指针类交互，如果要实现更彻底的禁用效果，可以根据需求追加以下配置：

• 给SVG元素设置opacity: 0.4这类半透明样式，从视觉上明确提示元素处于不可用状态
• 给元素设置tabIndex = -1，移除元素的键盘聚焦能力，避免Tab选中后通过键盘触发交互
• 如果需要兼容通用的禁用状态识别逻辑，可以给元素追加disabled属性

注意：pointer-events: none 仅拦截指针设备的交互事件，不会阻止JS代码主动触发元素上绑定的事件，也不会拦截事件冒泡，如果需要彻底屏蔽所有事件触发，需要额外配合事件拦截逻辑处理。

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