attr با html کار میکنه و prop با dom
attr همیشه یه رشته برمیگردونه ولی prop میتونه بسته به شرایط هر چیزی باشه (شی رشته عدد و...)
اگه کدی که گذاشتمو ببینی متوجه میشی که با تغییر checkbox و یا نوشتن توی input و در آخر کیلک روی btn مقادیر prop تغییر میکنه ولی attr ثابت میمونه
در ضمن اگه توجه کنی من خصوصیت checked رو توی html برای checkbox تعریف نکردم که باعث میشه attr تعریف نشده برگردونه
و اگه قسمت style رو نگاه کنی prop یه شی برگردونده ولی attr یه رشته ...
در کل توصیه میشه از prop استفاده بشه
اینم لینک مثال :
شاید پاسخ شما همینجا باشد