این آموزش در تاریخ ۱۴۰۱/۰۶/۲۷ آپدیت شده است.

آموزش ویژگی style در DOM جاوااسکریپت

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

ویژگی style در DOM جاوااسکریپت

Free-Learn

ویژگی style در DOM جاوااسکریپت

با استفاده از ویژگی style هم میتونیم خوده ویژگی زبان CSS یک تگ رو بدست آوریم و هم میتونیم ویژگی جدید CSS براش تعریف نماییم.

همونطور که میدونید ما یک زبان داریم به اسم CSS ( یا سی اس اس ) یا زبان استایل نویسی هم بهش میگیم، خب ما در این زبان تعدادی ویژگی داریم که بهشون میگن Property ، که این ویژگی ها خب هرکدوم میبینی کاری برامون انجام میدن. ( لیست کامل ویژگی های زبان CSS )

مثلا با استفاده از ویژگی font-size میتونیم اندازه فونت رو مشخص کنیم یا مثلا با استفاده از ویژگی text-align میتونیم تراز متن رو بصورت افقی مشخص نماییم و کلی ویژگی دیگه که هرکدوم کاری انجام میدن.

حال ما در زبان جاوااسکریپت هم این قدرت رو داریم که بتونیم برای یک تگ استایل تعریف کنیم ( یعنی خوده ویژگی ها همونایی هستن که درون CSS هستن ) ما فقط میتونیم از اونا در جاوااسکریپت هم استفاده نماییم.

مقدار برگشتی برگشت مقدار یک ویژگی مشخص شده
نسخه DOM Dom Level 2

Free-Learn

مثال از این ویژگی

در ادامه میتوانید یک مثال از این ویژگی را در زبان جاوا اسکریپت مشاهده نمایید.

مثال شماره ۱ : گرفتن مقدار ویژگی color

امتحان کنید

مثال شماره ۲ : تنظیم مقدار جدید برای ویژگی color

امتحان کنید

مثال شماره ۳ : میخوایم با استفاده از جاوااسکریپت اول یک تگ Style در صفحه ایجاد کنیم بعدش به تگ head داخل صفحه اضافش کنیم و در نهایت داخل تگ Style میخوایم استایل جدید برای صفحه تعریف کنیم.

امتحان کنید

مثال شماره ۴ : استایل دادن به تگ body ( یعنی به کل صفحه )

امتحان کنید

توضیح مثال بالا :

یادتون باشه همیشه اون ویژگی هایی که ۲ کلمه ای هستند ( مثه text-align یا background-color و… ) نباید هیچ فاصله ای بینشون وجود داشته باشه، و همیشه حرف اول از کلمه دوم باید با حروف بزرگ نوشته شه. مثال :

Free-Learn

پشتیبانی مرورگرها

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این ویژگی در جاوااسکریپت پشتیبانی میکنند یا خیر.

نام ویژگی Chrome Firefox Opera Safari Edge
style بله بله بله بله بله

Free-Learn

شکل نوشتاری

نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در جاوااسکریپت بصورت زیر می باشد.

  • برای گرفتن مقدار ویژگی :

  • Property_Name : نام ویژگی سی اس اس
  • تنظیم / ست کردن مقدار جدید :

  • Property_Name : نام ویژگی سی اس اس
  • Property_Value  : مقدار ویژگی سی اس اس

Free-Learn

مثال های بیشتر

مثال شماره ۱ : تنظیم رنگ و تصویر زمینه

امتحان کنید

مثال شماره ۲ : انتخاب رنگ زمینه و رنگ متن صفحه، توسط کاربر

امتحان کنید

Free-Learn

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

  • ویژگی هایی که ۲ کلمه ای هستند ( مثه text-align و.. ) باید هیچ فاصله ای بین کلمات نباشه و همیشه حرف اول از کلمه دوم باید با حروف بزرگ نوشته شه. ( مثه style.textAlign )
  • لیست کامل ویژگی های زبان CSS را از اینجا مشاهده نمایید.

Free-Learn

دریافت PDF یا پرینت این مطلب