جاوا اسکریپت به زبان ساده - جلسه هفدهم - تغییر استایل (CSS)

یک‌شنبه ۳۰ اردیبهشت ۱۳۹۷ - ۱۹:۰۰
مطالعه 3 دقیقه
در این قسمت از سری آموزش‌های جاوا اسکریپت، به سراغ تغییر استایل و ظاهر المان‌های اچ‌تی‌ام‌ال خواهیم رفت. برای فراگیری این بخش با ما همراه شوید.
تبلیغات

اگر خاطرتان باشد، در جلسات پیش نحوه پیدا کردن المان‌های اچ‌تی‌ام‌ال را آموختیم. با در اختیار گرفتن یک المان اچ تی ام ال در جاوا اسکریپت علاوه بر متدهایی همچون خواندن محتویات اچ تی  ام ال یا تغییر اتریبیوت‌های آن، امکان تغییر استایل‌ها و شکل ظاهری آن‌ها نیز وجود دارد. در این قسمت از آموزش به بررسی عمیق‌تر این موضوع خواهیم پرداخت. 

برای این کار مثل همیشه ابتدا باید المان اچ‌تی‌ام‌الی که قصد تغییر در سی اس اس آن را داریم پیدا کنیم، سپس استایل‌های آن را تغییر دهیم.

document.getElementById(id).style.property = " استایل‌های جدید "

همانطور که می‌بینید برای تغییر استایل‌های یک المان اچ تی ام ال دستوری به نام style وجود دارد. متد style در جاوا اسکریپت حاوی تمامی استایل‌هایی است که در CSS به یک المان اچ‌تی‌ام‌ال می‌توان اعمال کرد. برای مثال فرض کنید ما یک المان html با آی‌دی منحصر به فرد red داریم:

رنگ را به قرمز تغییر بده

این المان را می‌خواهیم بعد از کلیک شدن روی آن به کمک جاوا اسکریپت به رنگ قرمز در بیاوریم. برای این کار ابتدا باید متد کلیک را روی این المان اضافه کنیم. همانطور که در جلسات گذشته گفته شد به کمک اتریبیوت onclick روی المان‌های اچ تی ام ال می‌توانید تغییرات جاوا اسکریپتی دلخواه را بعد از کلیک روی المان اعمال کنید. (البته راه‌های دیگری مثل eventListener ها نیز وجود دارد که هنوز آن‌ها را نیاموخته‌ایم).

بدین ترتیب المان اچ تی ام ال red‌ به شکل زیر در می‌آید. 

رنگ را به قرمز تغییر بده

حالا باید در فایل جاوا اسکریپت خود یک فانکشن به نام changeColor بنویسیم که کار این فانکشن تغییر رنگ المان بعد از کلیک روی آن است.

بدین ترتیب در فایل جاوا اسکریپت خواهیم داشت:

function changeColor(){

document.getElementById("red").style.color = "red"

}

دقت کنید که حتما نتیجه را باید در قالب استرینگ بنویسید. همانطور که مشاهده می‌کنید متد Style در درون خود تمامی تغییرات سی اس اسی را با همان نام دارد. برای مثال برای تغییر رنگ از color برای تغییر display از دستور display و ... استفاده می‌کنیم. دستوراتی که در css دارای - هستند، به جای علامت - حرف دوم را بزرگ می‌نویسیم. مثال‌های زیر را نگاه کنید تا منظورمان را بهتر متوجه شوید.

document.getElementById("red").style.display = "none"

document.getElementById("red").style.fontSize = "12px"

همانطور که می‌بینید در این مثال ما فونت سایز را که کلمه دو بخشی در Css است به صورت دو کلمه چسبیده به هم که کلمه دوم با حرف بزرگ است نوشتیم(به این قاعده که حرف اول کلمه دوم با حرف بزرگ نوشته شود قاعده camelCase گفته می‌شود و جاوا اسکریپت از این قاعده پیروی می‌کند).

document.getElementById("red").style.width = "200px"

همچنین دقت کنید دستوراتی که دارای واحد هستند (مثل width یا font-size یا ... حتما واحد آن را در کنار آن بنویسید.

تمرین:

یک دکمه بنویسید که با کلیک روی آن کلیه المان‌های پاراگراف موجود در متن به رنگ آبی و فونت با اندازه ۱۴ در بیاید.

سخن پایانی:

در انتهای هفدهمین جلسه از آموزش جاوا اسکریپت با نحوه تغییر روی استایل‌های المان‌های اچ تی ام ال آشنا شدیم. در جلسه آینده باز هم سراغ استرینگ‌ها و متدهایی که روی این نوع متغیرها در جاوا اسکریپت می‌توان انجام داد خواهیم رفت. با زومیت همراه شوید.

لیست کلیه دستوراتی را که به کمک متد style روی المان‌های اچ تی ام ال قابل تغییر است، می‌توانید در این صفحه مشاهده کنید.

تبلیغات
داغ‌ترین مطالب روز

نظرات

تبلیغات