آموزش متد setProperty در CSSOM جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش متد setProperty در CSSOM جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
متد setProperty در CSSOM جاوااسکریپت
با استفاده از متد ()setProperty میتونیم یک ویژگی CSS جدید را برای یک عنصر تعریف نماییم و یا هم ویژگی موجود رو تغییر دهیم.
| مقدار برگشتی | undefined یا تعریف نشده |
|---|
Free-Learn
مثال از این متد
در ادامه میتوانید یک مثال از این متد را در زبان جاوا اسکریپت مشاهده نمایید.
مثال شماره ۱ : تنظیم ویژگی جدید بروی عنصر ( در صفت Style )
|
1 2 3 4 5 6 7 8 9 10 |
<script> function Set(){ var MyTag = document.getElementById("mytag"); var New_Property_1 = MyTag.style.setProperty("background-color", "blue"); var New_Property_2 = MyTag.style.setProperty("color", "#fff"); var New_Property_3 = MyTag.style.setProperty("text-align", "center"); } </script> |
مثال شماره ۲ : تغییر ( آپدیت یا بروزرسانی ) ویژگی فعلی با ویژگی جدید ( در صفت Style )
|
1 2 3 4 5 6 7 8 9 |
<script> function Set(){ var MyTag = document.getElementById("mytag"); var New_Property_1 = MyTag.style.setProperty("color", "blue"); var New_Property_2 = MyTag.style.setProperty("text-align", "center"); } </script> |
مثال شماره ۳ : تنظیم ویژگی جدید بروی عنصر ( در تگ Style )
|
1 2 3 4 5 6 7 8 9 10 |
<script> function Set(){ var MyStyle = document.styleSheets[0].cssRules[0].style; var New_Property_1 = MyStyle.setProperty("background-color", "orange"); var New_Property_2 = MyStyle.setProperty("color", "#fff"); var New_Property_3 = MyStyle.setProperty("text-align", "center"); } </script> |
مثال شماره ۴ : تغییر ( آپدیت یا بروزرسانی ) ویژگی فعلی با ویژگی جدید ( در تگ Style )
|
1 2 3 4 5 6 7 8 9 10 |
<script> function Set(){ var MyStyle = document.styleSheets[0].cssRules[0].style; var New_Property_1 = MyStyle.setProperty("background-color", "orange"); var New_Property_2 = MyStyle.setProperty("color", "#fff"); var New_Property_3 = MyStyle.setProperty("text-align", "center"); } </script> |
مثال شماره ۵ : استفاده از دستور important در تگ Style
|
1 2 3 4 5 6 7 8 9 10 |
<script> function Set(){ var MyStyle = document.styleSheets[0].cssRules[0].style; var New_Property_1 = MyStyle.setProperty("background-color", "orange" ,"important"); var New_Property_2 = MyStyle.setProperty("color", "#fff"); var New_Property_3 = MyStyle.setProperty("text-align", "center"); } </script> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این متد در جاوااسکریپت پشتیبانی میکنند یا خیر.
| نام متد | Chrome | Firefox | Opera | Safari | IE |
| ()setProperty | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این متد در جاوااسکریپت بصورت زیر می باشد.
|
1 |
Object.setProperty( "PropertyName" , "Value" , "Priority" ); |
Free-Learn
جدول پارامترها
در جدول زیر میتوانید، پارامترهایی را که میتوان در این متد استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| PropertyName | ضروری – نام ویژگی که قراره تنظیم بشه یا تغییر پیدا کنه |
| Value | اختیاری – مقدار ویژگی که قراره تنظیم بشه یا تغییر پیدا کنه |
| Priority | اختیاری – مشخص کردن اولویت اجرای ویژگی ( یعنی استفاده از important ) حتما آموزش دستور important رو مشاهده نمایید |
Free-Learn
نکات و توضیحات
- با استفاده از ویژگی cssText میتونیم ویژگی CSS + مقدارشو بدست آوریم.
- با استفاده از ویژگی parentRule میتونیم خوده انتخابگر + دستورات CSS شو بدست آوریم.
- با استفاده از ویژگی length میتونیم تعداد عددی ویژگی های موجود در یک تگ رو بدست آوریم.
- اگه مقدار ویژگی ( که اختیاری می باشد ) تنظیم نشود، هیچ اتفاق خاصی نمی افته و انگار فقط نام ویژگی رو خالی خالی نوشتیم.
