jQuery使用attr()设置style时是否总是仅最后一个样式生效？

你遇到的多组样式配置只有最后一个生效的现象，不是attr()方法的问题，本质是JavaScript对象的键名唯一性规则导致的。

根本原因 #

JavaScript 语法要求同一个对象内的键名必须唯一，如果出现重复的键名，后面定义的键值会直接覆盖前面的同名键值。你传入attr()的配置对象里重复写了4次style作为键，最终只有最后一个style:'border-style:dotted'会被保留，相当于你只给元素设置了这一条样式规则，自然只有最后一个样式生效。

正确实现方式 #

方案1：使用attr()设置样式 #

如果要通过attr()修改style属性设置多个样式，需要把所有样式规则合并到同一个字符串中，用分号分隔即可：

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

方案2：使用css()方法设置样式（更推荐） #

jQuery 专门提供了css()方法用于操作元素样式，不需要手动拼接style字符串，直接按键值对传入CSS规则即可，不会出现键名覆盖问题，写法更友好：

$('document').ready(function (){
  $('#prg1').css({
    color: 'yellow',
    'font-family': 'arial',
    'border-style': 'dotted'
  });
})

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