آموزش ویژگی cssText در CSSOM جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی cssText در CSSOM جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی cssText در CSSOM جاوااسکریپت
با استفاده از ویژگی cssText میتونیم مقدار یا محتوای دستورات CSS درون خطی ( که با استفاده از صفت Style ایجاد شده ) رو بدست آوریم و یا براش مقدار جدید تنظیم کنیم.
صفت style یکی از پرکاربردترین صفات زبان HTML می باشد که با استفاده از اون میتونیم برای هریک از تگ ها بصورت خطی یا Inline استایل بنویسیم.
| مقدار برگشتی | برگشت یک متن که نشان دهنده دستورات CSS همان عنصر می باشد |
|---|
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از این ویژگی را در زبان جاوا اسکریپت مشاهده نمایید.
مثال شماره ۱ : دریافت دستورات CSS با کلیک بروی یک دکمه
|
1 2 3 4 5 6 7 8 9 |
<script> function Get(){ var MyTag = document.getElementById("mytag"); var x = MyTag.style.cssText; document.getElementById("Result").innerHTML = x; } </script> |
مثال شماره ۲ : تنظیم دستورات CSS جدید
|
1 2 3 4 5 6 7 8 |
<script> function Set(){ var MyTag = document.getElementById("mytag"); var x = MyTag.style.cssText = "text-align:center; color:blue;"; } </script> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این ویژگی در جاوااسکریپت پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | IE |
| cssText | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در جاوااسکریپت بصورت زیر می باشد.
- برای گرفتن دستورات CSS :
|
1 |
Element.style.cssText; |
- برای ست کردن دستور جدید :
|
1 |
Element.style.cssText = " New Style "; |
Free-Learn
نکات و توضیحات
- این ویژگی فقط میتونه مقدار صفت Style که درون تگ قرار داره، رو برگردونه یا مقدار جدید براش تنظیم کنه.
- دستوراتی که درون این ویژگی قرار میگیرد ( مثلا در مثال شماره ۲ که خواستیم استایل جدید تعریف کنیم ) این دسورات در واقع همون ویژگی های زبان CSS می باشد.
