آموزش متد setAttribute در DOM جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش متد setAttribute در DOM جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
متد setAttribute در DOM جاوااسکریپت
با استفاده از متد ()setAttribute
میتونیم یک صفت بهمراه مقدار رو به یک عنصر اضافه نماییم.
مقدار برگشتی | هیچی یا undefined |
---|---|
نسخه DOM | Core Level 1 Element Object |
Free-Learn
مثال از این متد
در ادامه میتوانید یک مثال از این متد را در زبان جاوا اسکریپت مشاهده نمایید.
مثال شماره ۱ : با کلیک بروی یک دکمه، صفت Class با مقدار free-learn به تگ مورد نظرمون اضافه میشه.
1 2 3 4 5 6 7 8 9 |
<script> function set(){ var myp; myp = document.getElementById("MyP"); myp.setAttribute( "class" , "free-learn" ); } </script> |
مثال شماره ۲ : با کلیک بروی یک دکمه، صفت href با مقدار ‘ آدرس سایت فری لرن ‘ به تگ a اضافه میشه.
1 2 3 4 5 6 7 8 9 |
<script> function set(){ var mylink; mylink = document.getElementById("MyLink"); mylink.setAttribute( "href" , "https://free-learn.ir/" ); } </script> |
مثال شماره ۳ : میخوایم با کلیک بروی یک دکمه، آدرس یا مسیر یک تصویر رو بدست آوریم. ( برای بدست آوردن مقدار یک صفت باید از متد getAttribute استفاده نماییم )
1 2 3 4 5 6 7 8 9 10 |
<script> function get(){ var myimg , result; myimg = document.getElementById("MyImg"); result = document.getElementById("Result"); result.innerHTML = myimg.getAttribute("src"); } </script> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این متد در جاوااسکریپت پشتیبانی میکنند یا خیر.
نام متد | Chrome | Firefox | Opera | Safari | IE |
()setAttribute | بله | بله | بله | بله | ۸٫۰ |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این متد در جاوااسکریپت بصورت زیر می باشد.
1 |
Element.setAttribute( "Attribute_Name" , "Attribute_Value" ); |
Free-Learn
جدول پارامترها
در جدول زیر میتوانید، پارامترهایی را که میتوان در این متد استفاده کرد مشاهده نمایید.
مقدار | توضیح |
---|---|
Attribute_Name | ضروری – نام اون صفتی که میخوایم به تگ اضافه کنیم. |
Attribute_Value | ضروری – مقدار اون صفتی که میخوایم به تگ اضافه کنیم. |
Free-Learn
نکات و توضیحات
- اگه موقع اضافه کردن صفت، خوده صفت از قبل وجود داشته باشد، فقط مقدارش اضافه میشه یا هم مقدارش تغییر ( آپدیت ) میشه.
- برای اضافه کردن چندین کلاس بصورت همزمان، باید بین هر یک از کلاس ها یک عدد فاصله قرار داد. مثال :
-
1myp.setAttribute( "class" , "test1 test2" );
- هرچیزی که درون یک تگ ( یعنی درون تگ شروع ) قرار بگیرد صفت نام دارد، مثه صفت های id , class , src title و… ( لیست کامل صفت های زبان HTML )