در این مطلب می خواهیم ببینیم به چه شکل می تونیم استایل های CSS رو با جاوا اسکریپت تغییر بدیم؟
همانطور که می دانید برای استایل دهی تگ های html از CSS استفاده می کنیم.
استایل دهی در جاوا اسکریپت
همانطور که در مطالب آموزشی قبلی گفته شد برای تغییر تگ های html در جاوا اسکریپت ابتدا باید تگ مورد نظر را در یک متغیر ذخیره کنیم.
در مثال زیر با استفاده از دستور querySelector تگ “h1” رو در متغیری به نام “head” ذخیره کردیم.
سپس با استفاده از متد setAttribute استایل های CSS مورد نظر را روی آن اعمال کردیم.
const head = document.querySelector('h1');
head.setAttribute('style', 'margin: 50px; background:red');
روش بهینه تر دیگری برای اعمال استایل های CSS بر روی تگ های HTML از طریق جاوا اسکریپت وجود دارد به نام “style property” که در مثال زیر نمونه ای از آن را آورده ایم:
//using style property
const con = document.getElementById('content');
con.style.fontSize = '40px';
con.style.padding = '10px';
con.style.borderRadius = '50px';
con.style.textAlign = 'center';
con.style.color = '#FFF';
