I am very confused only i want to know if i gave duplicate attribute in attr() then can i only apply last one attribute ex --> attr({style:'color:yellow',style:'font-family:arial',style:'color:yellow'}) I I have given three same style here can only apply last one? Is it possible to apply second one 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>
So, your question is a little bit confusing, but I will try to address all possible scenarios:
.attr() function. So this is completely wrong;
any object b = { a: 1, a: 2 } is invalid and should not be used but the result will be b === { a: 2 }.attr({style:'color:yellow'}).attr({style:'font-family:arial') yes, it will get the last one since the attr function always overwrite the value, never merges it;.attr({ style:'color:yellow; font-family:arial; border-style:dotted'}); see that every item on the style is separated by ';'.
Basically, when you use .attr + style you are setting the complete style attribute for the html element, which means a whole css code so you don't need neither one 'style' per prop nor one 'attr' per prop;
Simply set the entire css string to the style attribute, that said, you can have as many css props you want, just split them with ';'EDIT: I've answered here based on your question, but as @Phil mentioned on the first comment below, you might get a better solution by using the .css() from jquery:
.css({
color: "yellow", fontFamily: "arial", borderStyle: "dotted"
});
Note the use of camelCase for the props with "-", or instead put the entire prop name among quotes like "border-style"
:)