آموزش ویژگی 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 از عنصر
|
1 2 3 4 5 6 7 8 9 10 |
<script> function get_style(){ var myp , result; myp = document.getElementById("MyP"); result = document.getElementById("Result"); result.innerHTML = myp.style.color; } </script> |
مثال شماره ۲ : تنظیم مقدار جدید برای ویژگی color
|
1 2 3 4 5 6 7 8 9 10 |
<script> function get_style(){ var myp , result; myp = document.getElementById("MyP"); result = document.getElementById("Result"); result.innerHTML = myp.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 my_style_tag , my_style_css; // style تعریف تگ my_style_tag = document.createElement("STYLE"); // css تعریف دستورات my_style_css = document.createTextNode( "body{background-color:#123456;text-align:center;}h2{background-color:#FFF4A3;}" ); // style درج کردن دستورات سی اس اس به داخل تگ my_style_tag.appendChild(my_style_css); // head به داخل تگ style درج کردن تگ document.head.appendChild(my_style_tag); } </script> |
مثال شماره ۴ : بدست آوردن دستورات CSS موجود در تگ Style صفحه
|
1 2 3 4 5 6 7 8 9 10 |
<script> function get_style(){ var mytag , result; mytag = document.getElementById("MyStyle"); result = document.getElementById("Result"); result.innerHTML = mytag.innerHTML; } </script> |
مثال شماره ۵ : استایل دادن به تگ body ( یعنی به کل صفحه )
|
1 2 3 4 5 6 7 8 9 10 |
<script> function set_style(){ document.body.style.backgroundColor = "#123456"; document.body.style.color = "white"; document.body.style.textAlign = "center"; document.body.style.fontSize = "13px"; } </script> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این ویژگی در جاوااسکریپت پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | IE |
| style | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در جاوااسکریپت بصورت زیر می باشد.
- برای گرفتن مقدار ویژگی :
|
1 |
Element.style.Property_Name; |
- Property_Name : نام ویژگی سی اس اس
- تنظیم / ست کردن مقدار جدید :
|
1 |
Element.style.Property_Name = " Property_Value "; |
- Property_Name : نام ویژگی سی اس اس
- Property_Value : مقدار ویژگی سی اس اس
Free-Learn
نکات و توضیحات
- ویژگی هایی که ۲ کلمه ای هستند ( مثه text-align و.. ) باید هیچ فاصله ای بین کلمات نباشه و همیشه حرف اول از کلمه دوم باید با حروف بزرگ نوشته شه. ( مثه style.textAlign )
- لیست کامل ویژگی های زبان CSS را از اینجا مشاهده نمایید.
