jQuery的attr()方法传入重复属性时是否仅最后一个属性生效？

这个现象和jQuery的attr()方法本身无关，是JavaScript对象字面量的固有特性导致的：

• 在JavaScript中，同一个对象字面量内如果出现重复的属性名，靠后的属性值会直接覆盖前面的同名属性值。这个覆盖逻辑在对象创建完成时就已经执行完毕，不会传入attr()方法中参与处理。

你写的attr({style:'color:yellow',style:'font-family:arial',style:'color:yellow',style:'border-style:dotted'})代码里，传入的对象最终只会保留最后一个style: 'border-style:dotted'键值对，前面三个style全部被覆盖，所以运行后只有最后一个样式生效。

如果你想要叠加多个样式规则，不要重复声明style属性，有两种标准实现方案：

1. 将所有样式规则合并到同一个style值中

$('#prg1').attr('style', 'color:yellow;font-family:arial;border-style:dotted');

2. 更推荐使用jQuery专门的css()方法设置样式，支持直接传入多个样式键值对，无需手动拼接字符串：

$('#prg1').css({
  color: 'yellow',
  fontFamily: 'arial',
  borderStyle: 'dotted'
});

如果你想要单独生效第二个font-family:arial的规则，直接把对应的样式写进style值或者css()方法的参数里即可。

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