为什么jQuery的attr()方法设置style时仅最后一个样式生效？

<!DOCTYPE html>
<html>
<body>
   <p id="prg1">first paragraph</p>
</body>

<script src="C:\Users\SUDARSHAN\Desktop\html_UI\jquery-3.6.0.js"></script>
<script>
   $('document').ready(function (){
      $('#prg1').attr({style:'color:yellow',style:'font-family:arial',style:'color:yellow',style:'border-style:dotted'});
    })
</script>
</html>

• 首先是JavaScript对象的特性限制：对象的键名具有唯一性，同一个键重复赋值时，后续的值会直接覆盖之前的所有值。你传入attr()方法的是一个字面量对象，重复写了4次style作为键，最终这个对象只会保留最后一次的style:'border-style:dotted'键值对，前面的配置全部被覆盖，相当于你只给attr()方法传入了这一个样式配置。
• 其次是attr()方法的作用逻辑限制：attr()的作用是设置元素的HTML属性，而style作为HTML属性时，值是完整的样式字符串，每次赋值都会直接覆盖整个style属性的原有值，不会做样式追加。就算你分开多次调用attr('style', 'xxx')，最终也只有最后一次的配置生效。

• 方案1：如果需要使用attr()设置样式，把所有样式规则拼接为同一个完整字符串传入即可：

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

• 方案2（更推荐）：使用jQuery专门提供的css()方法操作样式，该方法直接操作DOM的style对象，支持传入键值对对象，只会修改指定的样式属性，不会覆盖全部原有样式：

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

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