DOM Styling در جاوا اسکریپت

به نام خدا با عرض سلام و خسته نباشید خدمت دوستان گرامی. در راستای آموزش جاوا اسکریپت این جلسه به مبحث DOM Styling در جاوا اسکریپت خواهیم پرداخت. با ما همراه باشید.

Styling DOM Elements in JavaScript

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

DOM Styling در جاوا اسکریپت

 نحوه تنظیم Inline Styles روی عناصر

استایل های درون خطی (Inline styles) با استفاده از ویژگی style به طور مستقیم به عنصر HTML خاص اعمال می شوند.در جاوا اسکریپت از ویژگی style برای بدست آوردن یا تنظیم استایل درون خطی یک عنصر استفاده می شود.

مثال زیر پراپرتی رنگ و فونت یک عنصر را با  id="intro تنظیم می کند.

قراردادهای نامگذاری پراپرتی های CSS در جاوا اسکریپت

بسیاری از ویژگی‌های CSS، مانند  font-sizebackground-imagetext-decorationو …حاوی خط تیره (-) در نام خود هستند.از آنجایی که در جاوا اسکریپت خط فاصله یک عملگر رزرو شده است و به عنوان علامت منفی تعبیر می شود، پس امکان نوشتن عبارتی مانند  elem.style.font-size  وجود ندارد.

بنابراین، در جاوا اسکریپت، نام ویژگی های CSS که حاوی یک یا چند خط فاصله هستند، به یک کلمه با حروف بزرگ تبدیل می شوند.این کار با حذف خط تیره و بزرگ کردن حرف بلافاصله بعد از هر خط تیره انجام می شود، بنابراین به عنوان مثال  ویژگی CSS   font-size  به پراپرتی fontSize  و border-left-style  به borderLeftStyle  تبدیل می شود.

نحوه دریافت اطلاعات استایل از المنت ها

 استایل های اعمال شده بر روی عناصر HTML را میتوانید با استفاده از ویژگی style دریافت کنید.

مثال زیر اطلاعات استایل از عنصری دارایid="intro  را دریافت می کند.

ویژگی style هنگام دریافت اطلاعات استایل از عناصر چندان مفید نیست، زیرا فقط استایل های ست شده در پراپرتی style عنصر را برمی گرداند نه آنهایی را که از جاهای دیگر آمده است، مانند  embedded style sheets یا external style sheets.

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

 

نکته: مقدار 700 برای ویژگی CSS font-weight با کلمه کلیدی bold یکسان است. کلمه کلیدی رنگ قرمز همان rgb (255,0,0) است .

نحوه اضافه کردن کلاس های CSS به المنت ها

می‌توانید با استفاده از ویژگی  className، کلاس‌های CSS را برای عناصر HTML دریافت یا تنظیم کنید.

از آنجایی که class یک کلمه رزرو شده در جاوا اسکریپت است، بنابراین جاوا اسکریپت از ویژگی classNameبرای ارجاع مقدار اتریبیوت کلاس HTML استفاده می کند. مثال زیر نحوه اضافه کردن یک کلاس جدید یا جایگزینی تمام کلاس های موجود را به عنصر <div> با id="info  نشان می دهد.

حتی راه بهتری برای کار با کلاس های CSS وجود دارد. می توانید از ویژگی classList برای دریافت، تنظیم یا حذف کلاس های CSS به راحتی از یک عنصر استفاده کنید. این ویژگی در همه مرورگرهای اصلی به جز اینترنت اکسپلورر قبل از نسخه 10 پشتیبانی می شود. به عنوان مثال:

خب دوستان گرامی به پایان  بخش DOM Styling در جاوا اسکریپت رسیدیم امیدواریم مورد توجه شما قرار گیرد.

سایر مقالات

رویدادها (Event) در جاوا اسکریپت

 

 

 

برای امتیاز به این نوشته کلیک کنید!
[کل: 0 میانگین: 0]
اشتراک‌گذاری

دیدگاهتان را بنویسید

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