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

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

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

Free-Learn

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

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

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

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

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

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

Free-Learn

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

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

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

امتحان کنید

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

امتحان کنید

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

امتحان کنید

مثال شماره ۴ : بدست آوردن دستورات CSS موجود در تگ Style صفحه

امتحان کنید

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

امتحان کنید

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

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

Free-Learn

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

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

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

Free-Learn

شکل نوشتاری

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

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

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

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

Free-Learn

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

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

Free-Learn

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