为什么jQuery的attr()设置多个重复style属性时仅最后一个生效？

• JavaScript 对象的键具有唯一性：你传入 attr() 的配置对象中重复声明了3次 style 键，在JS语法中，重复的对象键会被后续赋值覆盖，最终该对象仅保留最后一次赋值的 style: 'border-style:dotted'，所以只有边框样式生效。
• attr() 方法是用来操作HTML元素属性的，style 作为HTML属性，它的取值是一整段完整的CSS样式字符串，本身不支持拆分多个配置项单独赋值。

方案1：继续使用attr() #

将所有样式合并为一个完整的style字符串传入即可：

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

方案2（更推荐）：使用jQuery的css()方法 #

css() 是jQuery专门用于操作元素行内样式的方法，支持直接传入样式键值对对象，无需手动拼接完整style字符串：

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

如果不写引号，CSS属性名也可以替换为驼峰格式，例如 fontFamily、borderStyle。

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