آموزش متد item در CSSOM جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش متد item در CSSOM جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
متد item در CSSOM جاوااسکریپت
با استفاده از متد ()item میتونیم نام ویژگی های CSS موجود در صفت Style رو بر اساس شماره جایگاه یا ایندکس یا Index بدست آوریم، بفرض مثال اگه دستورات زیر رو داشته باشیم :
|
1 |
text-align:center; |
متد ()item چیزی که برگشت میده، نام ویژگی هست ، پس یعنی مقدار برگشتی میشه text-align
شماره ایندکس یا شماره جایگاه یا Index هم که دیگه میدونید همیشه از ۰ شروع میشه تا به تعداد ویژگی هایی که وجود دارد، پس یعنی ایندکس اولین ویژگی میشه ۰ دومی میشه ۱ سومی میشه ۲ و… تا هر چقدر دیگه ویژگی باشه.
| مقدار برگشتی | برگشت نام ویژگی CSS |
|---|
Free-Learn
مثال از این متد
در ادامه میتوانید یک مثال از این متد را در زبان جاوا اسکریپت مشاهده نمایید.
مثال شماره ۱ : بدست آوردن نام دومین ویژگی ( شماره ایندکس اولین ویژگی میشه ۰ و دومین ویژگی میشه ۱ )
|
1 2 3 4 5 6 7 8 9 |
<script> function Get(){ var MyTag = document.getElementById("mytag"); var MyItem = MyTag.style.item(1); document.getElementById("Result").innerHTML = MyItem; } </script> |
مثال شماره ۲ : بدست آوردن سومین نام ویژگی از دستورات CSS موجود در تگ Style ( در مثال بالا از صفت Style بود ولی این مثال از تگ Style موجود در تگ head صفحه هست )
|
1 2 3 4 5 6 7 8 9 |
<script> function Get(){ var MyTag = document.styleSheets[0].rules[0]; var MyItem = MyTag.style.item(2); document.getElementById("Result").innerHTML = MyItem; } </script> |
مثال شماره ۳ : بدست آوردن نام تمامی ویژگی های موجود در صفت Style
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> function Get(){ var MyTag, i, result; result = ""; MyTag = document.getElementById("mytag"); for (i = 0; i < MyTag.style.length; i++) { result = result + MyTag.style.item(i) + "<br>"; } document.getElementById("Result").innerHTML += result; } </script> |
مثال شماره ۴ : بدست آوردن نام تمامی ویژگی های موجود در تگ Style
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> function Get(){ var MyStyle, i, result; result = ""; MyStyle = document.styleSheets[0].rules[0]; for (i = 0; i < MyStyle.style.length; i++) { result = result + MyStyle.style.item(i) + "<br>"; } document.getElementById("Result").innerHTML += result; } </script> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این متد در جاوااسکریپت پشتیبانی میکنند یا خیر.
| نام متد | Chrome | Firefox | Opera | Safari | IE |
| ()item | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این متد در جاوااسکریپت بصورت زیر می باشد.
|
1 |
style.item( Index_Number ); |
- Index_Number = شماره ایندکس یا شماره جایگاه
Free-Learn
نکات و توضیحات
- با استفاده از ویژگی cssText میتونیم ویژگی CSS + مقدارشو بدست آوریم.
- با استفاده از ویژگی parentRule میتونیم خوده انتخابگر + دستورات CSS شو بدست آوریم.
- با استفاده از ویژگی length میتونیم تعداد عددی ویژگی های موجود در یک تگ رو بدست آوریم.
