修改div元素max-width样式时触发‘Invalid left-hand side in assignment’错误的求助

嗨，我一眼就看到你踩了个JavaScript操作CSS样式的经典小坑啦！

你遇到的Invalid left-hand side in assignment错误，根源出在这行代码上：

x.style.max-width = (show)? "850px" : "600px";

在JavaScript里，访问DOM元素的CSS样式属性时，不能直接使用带横杠的CSS属性名（比如max-width）。因为横杠在JS语法里是减号运算符，这行代码会被浏览器错误解析成：x.style.max - width = ...——相当于你试图把值赋值给一个减法表达式的结果，这显然不符合赋值语法规则，所以报错了。

解决方案：用驼峰命名法替换横杠命名 #

对于带横杠的CSS属性，JS里需要转换成驼峰命名：去掉横杠，把横杠后的第一个字母大写。所以max-width要改成maxWidth，修正后的代码如下：

x.style.maxWidth = show ? "850px" : "600px";

关于你提到的table-cell为什么能正常工作的疑问 #

你说代码里的cells[col].style.display = show ? "table-cell" : "none";没报错，这是因为table-cell是CSS属性的值，它是以字符串形式赋值的，JS只会把它当作普通字符串处理，不需要遵循属性名的驼峰规则，所以完全没问题~

另外补充个小建议：你设定的移动端600px宽度可能偏宽，现在主流手机的视口宽度大多在375px-414px之间，你可以考虑用100%或者结合媒体查询来更灵活地适配不同设备，但这部分属于优化项啦。

内容来源于stack exchange