آموزش ویژگی parentRule در CSSOM جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی parentRule در CSSOM جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی parentRule در CSSOM جاوااسکریپت
با استفاده از ویژگی parentRule میتونیم دستورات CSS موجود در تگ Style ( اون تگ Style که داخل تگ Head قرار میگیره ) رو بدست آوریم.
مثلا اگه دستورات CSS زیر در نظر داشته باشیم :
|
1 2 3 4 5 6 7 |
<style> h2 { color:blue; } </style> |
چیزی که ویژگی parentRule به خروجی میده میشه :
|
1 |
h2 { color:blue; } |
| مقدار برگشتی | برگشت یک شئ از دستورات CSS |
|---|
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از این ویژگی را در زبان جاوا اسکریپت مشاهده نمایید.
مثال شماره ۱ : دریافت فقط خوده دستورات CSS ( یعنی خوده ویژگی ها منظورمه ) از تگ Style موجود در صفحه ( بدون استفاده از ویژگی parentRule )
|
1 2 3 4 5 6 7 8 |
<script> function Get(){ var MyStyle = document.styleSheets[0].rules[0].style; document.getElementById("Result").innerHTML = MyStyle.cssText; } </script> |
مثال شماره ۲ : دریافت دستورات CSS بهمراه انتخابگر ( یعنی بطور کامل بلوک دستورات رو برمیگردونه ) ( استفاده از ویژگی parentRule )
|
1 2 3 4 5 6 7 8 9 |
<script> function Get(){ var MyStyle = document.styleSheets[0].rules[0].style; var MyBlock = MyStyle.parentRule; document.getElementById("Result").innerHTML = MyBlock.cssText; } </script> |
مثال شماره ۳ : دریافت از StyleSheet شماره ۲ و قانون ( یا دستور ) CSS شماره ۲
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<head> <!-- StyleSheet [0] --> <style> /* rules[0] */ h2{ color: blue; font-size: 25px; text-align:center; } </style> <!-- StyleSheet [1] --> <style> /* rules[0] */ div{ font-size: 25px; } /* rules[1] */ p{ color: red; font-size: 25px; text-align:center; } </style> </head> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این ویژگی در جاوااسکریپت پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | IE |
| parentRule | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در جاوااسکریپت بصورت زیر می باشد.
|
1 |
Object.parentRule; |
Free-Learn
نکات و توضیحات
- این ویژگی میتونه دستورات CSS موجود در تگ Style موجود در صفحه رو برگردونه.
- ولی ویژگی cssText میتونه فقط دستورات CSS موجود در صفت Style رو برگردونه.
