why does attr() apply last one duplicate style if i gave it multiple style there in attr() method in-CodePudding

please help me i am learning jquery i want to know i have used attr() for applying style on element and i have given 4 style attribute but it is applying last one style attribute so i want to know why it is applying last one style only what is the reason please help only i want to konw why it is applying only last one style?

<!DOCTYPE html>
<html>
<body>
   <p id="prg1">first paragraph</p>
   <h1 id="h11">first heading</h1>
   <h1 id="h22">second heading</h1>
</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: 'border-style:dotted'})
   })
</script>
</html>

CodePudding user response：

You can do it like this if you want to apply multiple options in the style:

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

Demo

Show code snippet

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="prg1">first paragraph</p>
<h1 id="h11">first heading</h1>
<h1 id="h22">second heading</h1>

CodePudding user response：

Show code snippet

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="prg1">first paragraph</p>
<h1 id="h11">first heading</h1>
<h1 id="h22">second heading</h1>