使用jQuery修改margin-left遇Unexpected token错误的解决方法咨询

嘿，这个问题我太熟了！其实就是JavaScript对象字面量的语法小坑——当你用css()方法传入对象来设置样式时，带连字符（-）的CSS属性名如果直接写，JavaScript会把-当成减法运算符，自然就报"Unexpected token"错误了。给你几个靠谱的解决办法：

方法1：给带连字符的属性名加引号 #

把margin-left用单引号或双引号包裹起来，明确告诉JS这是一个属性名，不是表达式：

$(".settingslist").click(function() {
  $(".containcontacts,.containtodolist").css({ 
    display: "none",
    "margin-left": "20px" // 加引号就不会触发语法错误了
  });
  // 你的其他代码...
});

方法2：用驼峰命名法替代连字符 #

jQuery内部会自动把驼峰格式的属性名转换成带连字符的标准CSS属性，比如把margin-left写成marginLeft，这种写法既符合JavaScript的编码习惯，也完全不会报错：

$(".settingslist").click(function() {
  $(".containcontacts,.containtodolist").css({ 
    display: "none",
    marginLeft: "20px" // 驼峰命名写起来更顺手
  });
  // 你的其他代码...
});

方法3：单个属性直接用双参数写法 #

如果你只需要修改这一个边距属性（或者少量独立属性），可以不用对象，直接给css()传两个参数：属性名和值，这种写法里带连字符的属性名完全没问题：

$(".settingslist").click(function() {
  $(".containcontacts,.containtodolist")
    .css("display", "none")
    .css("margin-left", "20px"); // 直接传参数更简洁
  // 你的其他代码...
});

选哪种都可以，看你个人习惯～我自己平时更常用驼峰命名法，写起来顺手还不容易出错。

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