این آموزش در تاریخ ۱۴۰۱/۰۶/۲۷ آپدیت شده است.
آموزش ویژگی 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
|
1 2 3 4 5 6 7 |
<script> function Get_Value(){ Result.innerHTML = MyTag.style.color; } </script> |
مثال شماره ۲ : تنظیم مقدار جدید برای ویژگی color
|
1 2 3 4 5 6 7 |
<script> function Get_Value(){ Result.innerHTML = MyTag.style.color = "red"; } </script> |
مثال شماره ۳ : میخوایم با استفاده از جاوااسکریپت اول یک تگ Style در صفحه ایجاد کنیم بعدش به تگ head داخل صفحه اضافش کنیم و در نهایت داخل تگ Style میخوایم استایل جدید برای صفحه تعریف کنیم.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<script> function Set_Style(){ var Style_Tag , Style_CSS; // ایجاد تگ استایل Style_Tag = document.createElement("STYLE"); // css تعریف دستورات Style_CSS = document.createTextNode( "body{ background-color: #123456; text-align: center; } h2{ background-color: #FFF4A3; }" ); // style درج کردن دستورات سی اس اس به داخل تگ Style_Tag.appendChild(Style_CSS); // head به داخل تگ style درج کردن تگ document.head.appendChild(Style_Tag); } </script> |
مثال شماره ۴ : استایل دادن به تگ body ( یعنی به کل صفحه )
|
1 2 3 4 5 6 7 8 |
<script> function Change(){ document.body.style.backgroundColor = "#282C34"; document.body.style.color = "#fff"; } </script> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این ویژگی در جاوااسکریپت پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | Edge |
| style | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در جاوااسکریپت بصورت زیر می باشد.
- برای گرفتن مقدار ویژگی :
|
1 |
Element.style.Property_Name; |
- Property_Name : نام ویژگی سی اس اس
- تنظیم / ست کردن مقدار جدید :
|
1 |
Element.style.Property_Name = " Property_Value "; |
- Property_Name : نام ویژگی سی اس اس
- Property_Value : مقدار ویژگی سی اس اس
Free-Learn
مثال های بیشتر
مثال شماره ۱ : تنظیم رنگ و تصویر زمینه
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script> function set_color(){ document.body.style.backgroundImage = "none"; document.body.style.backgroundColor = "#282c34"; document.body.style.color = "#fff"; } function set_image(){ document.body.style.backgroundColor = "transparent"; document.body.style.backgroundImage = "url('files/bg-1.jpg')"; document.body.style.backgroundRepeat = "no-repeat"; document.body.style.backgroundPosition = "center center"; document.body.style.backgroundSize = "cover"; } </script> |
مثال شماره ۲ : انتخاب رنگ زمینه و رنگ متن صفحه، توسط کاربر
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> function set_bg_color(){ var BG_Color = document.getElementById("BGC").value; document.body.style.backgroundColor = BG_Color; } function set_text_color(){ var Text_Color = document.getElementById("TXTC").value; document.body.style.color = Text_Color; } </script> |
Free-Learn
نکات و توضیحات
- ویژگی هایی که ۲ کلمه ای هستند ( مثه text-align و.. ) باید هیچ فاصله ای بین کلمات نباشه و همیشه حرف اول از کلمه دوم باید با حروف بزرگ نوشته شه. ( مثه style.textAlign )
- لیست کامل ویژگی های زبان CSS را از اینجا مشاهده نمایید.
