JavaScript报错Uncaught SyntaxError：赋值左侧无效及SVG事件异常求助

嘿，这个问题的根源其实一眼就能看出来——你的代码里的语法错误直接导致了事件逻辑完全无法执行！

你看触发报错的这句代码：

document.getElementById('TEST').style.fill-opacity = '0.5;';

这里的问题有两个：

1. 用点语法访问style对象的fill-opacity属性时，连字符会被JavaScript解析成减法运算符，相当于写成了style.fill - opacity = '0.5;'，这完全不符合赋值语句的语法规则，所以才会抛出Uncaught SyntaxError: Invalid left-hand side in assignment错误，事件自然没法正常触发。
2. 字符串里多写了一个分号，应该是'0.5'而不是'0.5;'，这个小细节也会影响样式的正确生效。

给你两种正确的修正写法：

• 驼峰式命名（推荐）：JavaScript操作DOM样式时，带连字符的CSS属性需要转成驼峰式命名

document.getElementById('TEST_area').onmouseenter = function(){ 
  document.getElementById('TEST').style.fillOpacity = '0.5'; 
};

• 方括号语法：如果想保留CSS原生的属性名格式，可以用方括号来访问属性

document.getElementById('TEST_area').onmouseenter = function(){ 
  document.getElementById('TEST').style['fill-opacity'] = '0.5'; 
};

你提到之前代码能正常运行，可能是之前的写法有误记，或者当时的环境有特殊兼容逻辑，但现在这个语法错误是明确存在的，修正后应该就能让onmouseenter和onmouseleave事件正常工作了。

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