نحوه استایل دهی عناصر در جاوا اسکریپت

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

نحوه استایل دهی عناصر در جاوا اسکریپت

Free-Learn

نحوه استایل دهی عناصر در جاوا اسکریپت

ما میدونیم که زبان CSS زبانی است که با استفاده از اون میتونیم به عناصر ( تگ های ) موجود در صفحه استایل بدیم ( شکل و شمایل ، رنگ بندی و… )

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

پس وقتی در جاوااسکریپت میگیم استایل دادن به عناصر ، دیگه اینو بطور کلی بدونید یعنی عملا کار با ویژگی های عناصر، و کار با ویژگی های عناصر یعنی عملا تغییر دادن / ایجاد کردن استایل بروی عناصر می باشد.

خب ما کلی ویژگی داریم در CSS ، که پیشنهاد میکنم حتما لیست کامل ویژگی های CSS رو مشاهده نمایید، بفرض مثال یه ویژگی داریم به اسم color ، که با استفاده از اون میتونیم رنگ متن یک عنصر رو مشخص کنیم، به همین راحتی!

حال شکل کلی برای ایجاد / تغییر استایل عناصر در جاوا اسکریپت بصورت زیر می باشد :

  • Element : اون عنصری که میخوایم استایل بهش بدیم
  • style : یک کلمه کلیدی هست که یعنی میخوایم استایل بدیم
  • property : اون ویژگی که میخوایم اعمال بشه
  • Value_Property : مقدار اون ویژگی سی اس اس که میخوایم اعمال بشه

Free-Learn

نحوه نوشتن استایل در جاوا اسکریپت

برای استایل دادن به عناصر توسط جاوا اسکریپت یه چندتا قانون کوچیک داریم که میگه :

  • هیچ فاصله ای بین نام ویژگی نباید باشه
  • ویژگی های ۲ کلمه ای ، همیشه حرف اول از کلمه دوم باید با حروف بزرگ نوشته شه
  • ویژگی های ۱ کلمه ای همیشه باید با حروف کوچک انگلیسی نوشته شن

مثال :

و هر ویژگی دیگه ای که ۲ کلمه ای باشد ، دیگه حواستون باشه باید حرف اول از کلمه ی دوم رو با حروف بزرگ انگلیسی نوشت.

Free-Learn

مثال های مختلف از استایل دادن به عناصر در جاوا اسکریپت

مثال شماره ۱ : با کلیک بروی دکمه رنگ زمینه و رنگ متن صفحه تغییر پیدا میکند

امتحان کنید

مثال شماره ۲ : با کلیک بروی یک دکمه باکس متن مخفی می شود و با کلیک بروی دکمه دیگر نمایش داده میشود

امتحان کنید

مثال شماره ۳ : با کلیک بروی ۱ دکمه متن موجود در باکس هم مخفی میشود و هم نمایش داده میشود. ( کاربر روش کلیک میکنه مخفی میشه بعد دوباره که کلیک کنه نمایش داده میشه )

امتحان کنید

مثال شماره ۴ : قرار دادن تصویر برای زمینه صفحه

امتحان کنید

Free-Learn

نکات و توضیحات

  • ویژگی هایی که ۲ کلمه ای هستند ( مثه backgroundColor )، همیشه حرف اول از کلمه ی دوم باید با حروف بزرگ انگلیسی نوشته شود.
  • ویژگی هایی که ۱ کلمه ای هستند ( مثه color ) همیشه باید بطور کامل با حروف کوچک انگلیسی نوشته شود.
  • نباید هیچ فاصله ای بین مقداری که وارد میکنید وجود داشته باشد.
  • در آموزش هر یک از ویژگی های CSS در قسمت » جدول مشخصات ویژگی ، میتونید نحوه استفاده از همون ویژگی رو در جاوااسکریپت مشاهده نمایید. ( مشاهده نمونه )

Free-Learn

فروشگاه فری لرن
دریافت PDF یا پرینت این مطلب