خانه آموزش زبان جاوااسکریپت آموزش DOM در جاوااسکریپت متد setAttribute در DOM جاوااسکریپت

متد setAttribute در DOM جاوااسکریپت

توسط

۱۴۰۰-۰۳-۰۷

آموزش متد setAttribute در DOM جاوااسکریپت

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش متد setAttribute در DOM جاوااسکریپت با من همراه باشید.

متد setAttribute در DOM جاوااسکریپت

Free-Learn

آنچه در این جلسه میخوانید :

1 متد setAttribute در DOM جاوااسکریپت
2 مثال از این متد
3 پشتیبانی مرورگرها
4 شکل نوشتاری
5 جدول پارامترها
6 نکات و توضیحات

متد setAttribute در DOM جاوااسکریپت

با استفاده از متد ()setAttribute میتونیم یک صفت بهمراه مقدار رو به یک عنصر اضافه نماییم.

برای بدست آوردن مقدار یک صفت میتوان از متد getAttribute استفاده کرد.

مقدار برگشتی	هیچی یا undefined
نسخه DOM	Core Level 1 Element Object

Free-Learn

مثال از این متد

در ادامه میتوانید یک مثال از این متد را در زبان جاوا اسکریپت مشاهده نمایید.

مثال شماره ۱ : با کلیک بروی یک دکمه، صفت Class با مقدار free-learn به تگ مورد نظرمون اضافه میشه.

<script>

function set(){
 var myp;
 myp = document.getElementById("MyP");
 myp.setAttribute( "class" , "free-learn" );
}

</script>

function set(){

var myp;

myp = document.getElementById("MyP");

myp.setAttribute( "class" , "free-learn" );

}

</script>

امتحان کنید

مثال شماره ۲ : با کلیک بروی یک دکمه، صفت href با مقدار ‘ آدرس سایت فری لرن ‘ به تگ a اضافه میشه.

<script>

function set(){
 var mylink;
 mylink = document.getElementById("MyLink");
 mylink.setAttribute( "href" , "https://free-learn.ir/" );
}

</script>

function set(){

var mylink;

mylink = document.getElementById("MyLink");

mylink.setAttribute( "href" , "https://free-learn.ir/" );

}

</script>

امتحان کنید

مثال شماره ۳ : میخوایم با کلیک بروی یک دکمه، آدرس یا مسیر یک تصویر رو بدست آوریم. ( برای بدست آوردن مقدار یک صفت باید از متد getAttribute استفاده نماییم )

<script>

function get(){
 var myimg , result;
 myimg = document.getElementById("MyImg");
 result = document.getElementById("Result");
 result.innerHTML = myimg.getAttribute("src");
}

</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) این متد در جاوااسکریپت بصورت زیر می باشد.

Element.setAttribute( "Attribute_Name" , "Attribute_Value" );

1	Element.setAttribute( "Attribute_Name" , "Attribute_Value" );

Free-Learn

جدول پارامترها

در جدول زیر میتوانید، پارامترهایی را که میتوان در این متد استفاده کرد مشاهده نمایید.

مقدار	توضیح
Attribute_Name	ضروری – نام اون صفتی که میخوایم به تگ اضافه کنیم.
Attribute_Value	ضروری – مقدار اون صفتی که میخوایم به تگ اضافه کنیم.

Free-Learn

نکات و توضیحات

اگه موقع اضافه کردن صفت، خوده صفت از قبل وجود داشته باشد، فقط مقدارش اضافه میشه یا هم مقدارش تغییر ( آپدیت ) میشه.
برای اضافه کردن چندین کلاس بصورت همزمان، باید بین هر یک از کلاس ها یک عدد فاصله قرار داد. مثال :
myp.setAttribute( "class" , "test1 test2" );

1

myp.setAttribute( "class" , "test1 test2" );
هرچیزی که درون یک تگ ( یعنی درون تگ شروع ) قرار بگیرد صفت نام دارد، مثه صفت های id , class , src title و… ( لیست کامل صفت های زبان HTML )

Free-Learn

دریافت PDF یا پرینت این مطلب