آموزش جاوا اسکریپت – استایل دهی DOM در جاوا اسکریپت

آموزش جاوا اسکریپت

در این بخش از سری آموزش جاوا اسکریپت قصد داریم شما را با نحوه استایل دهی DOM در جاوا اسکریپت آشنا کنیم.

 

استایل دهی DOM در جاوا اسکریپت

شما می توانید برای تغییر نمایش بصری سندهای HTML بصورت داینامیک با جاوا اسکریپت استایل هایی را اعمال کنید. تقریبا می توانید تمام استایل ها همانند فونت, رنگ, حاشیه ها, پس زمینه, تراز بندی, عرض و ارتفاع, موقعیت و… را ست کنید.

 

ست کردن استایل خطی المان ها

استایل های خطی مستقیما روی المان خاص با خصوصیت style اعمال می شود. در جاوا اسکریپت خصوصیت style برای دریافت یا ست کردن استایل یک المان استفاده می شود.

مثال زیر به شما نحوه ست کردن رنگ و فونت یک المان با id=”intro” نشان می دهد.

 

تبدیل نام خصوصیات CSS در جاوا اسکریپت

خصوصیات زیادی از CSS مثل font-size, background-image, text-decoration و غیره دارای در نام هستند. از آنجا که خط ربط یا همان در جاوا اسکریپت یک اپراتور رزرو شده است و به عنوان علامت منها تفسیر می شود پس غیر ممکن است که عبارتی مثل elm.style.font-size بنویسید.

بنابراین در جاوا اسکریپت, نام های خصوصیت CSS که شامل یک یا چند خط ربط هسند حرف اول آنها به صورت حروف بزرگ تبدیل می شود. که با حذف کردن و تبدیل به حروف بزرگ هر حرف بعد از انجام می شود.

برای همین font-size تبدیل به fontSize و border-left-style نیز به borderLeftStyle می شود.

 

دریافت استایل های المان

همانند روش بالا می توانید با خصوصیت style مقدار استایل خاصی از المان را دریافت کنید.

مثال زیر به شما نحوه دریافت استایل های المان با id=”intro” نشان می دهد.

خصوصیت style زمانی که قصد دریافت اطلاعات استایل از المان دارید, آنقدرها هم مفید نیست چرا که فقط استایل هایی که در بخش style=”” المان ست شده اند را دریافت می کند و نمی توانید استایل های دیگر مثل استایل های جاسازی (embed) شده یا استایل اعمال شده توسط فایل css خارجی را دریافت کنید.

برای دریافت تمام مقادیر خصوصیات CSS که برای رندر یک المان استفاده شده است می توانید از متد window.getComputedStyle() بهره ببرید.

نکته: مقدار ۷۰۰ برای font-weight مشابه کلمه کلیدی bold است. کلمه کلید رنگ red نیز مشابه rgb(255,0,0) است.

 

افزودن کلاس های CSS به المان ها

شما می توانید مقدار کلاس های المان HTML را با خصوصیت className دریافت یا ست کنید.

از آنجا که class یک کلمه رزرو شده در جاوا اسکریپت است, بنابراین جاوا اسکریپت از خصوصیت className برای اشاره به مقدار مشخصه class در html استفاده می کند.

مثال زیر به شما نحوه افزودن کلاس یا جایگزین کردن کلاس فعلی به المان <div> که id=”info” را دارد استفاده می کند.

راه بسیار بهتری نیز برای کار کردن با کلاس ها وجود دارد. می توانید از خصوصیت classList به آسانی برای دریافت, ست یا حذف کلاس های CSS استفاده کنید.

 

امیدوارم  از آموزش استایل دهی DOM در جاوا اسکریپت نهایت استفاده را برده باشید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید.

حسن شفیعی علاقه خاصی به برنامه نویسی وب و موبایل دارم و هر روز تلاش می کنم به این حوزه مسلط تر شوم و اطلاعاتم را به شکل کاربردی برای علاقه مندان در وب به اشتراک بگذارم. توصیه من: هاست میهن وب‎هاست
مطالب زیر را حتما بخوانید
دیدگاه کاربران

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دوره های آموزشی