این آموزش در تاریخ ۱۳۹۹/۱۱/۱۴ آپدیت شده است.
کار با صفات عناصر در جاوا اسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با صفات عناصر در جاوا اسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
کار با صفات عناصر در جاوا اسکریپت
ما در این جلسه میخوایم با صفات عناصر ( تگ ها ) در جاوا اسکریپت کار کنیم و ببینیم چجوری میتونیم صفت یک تگ رو بدست بیاریم یا مثلا چجوری میشه یه صفت + مقدار برای یه تگ مشخص کرد.
در ادامه و تا پایان این جلسه میخوایم با متدهای زیر که برای کار با صفات می باشند کار کنیم :
- getAttribute : بدست آوردن صفت + مقدار
- بدست آوردن صفت + مقدار بصورت مستقیم
- setAttribute : تنظیم صفت + مقدار
- removeAttribute : حذف کردن صفت + مقدار
Free-Learn
کار با متد getAttribute
خب ما شاید بخوایم نام صفت یه تگ رو بدست بیاریم یا اصلا شاید بخوایم مقدار صفت یک تگ رو بدست بیاریم، باید چکار کنیم؟ خیلی خیلی راحت در جاوا اسکریپت میتونیم اینکارو انجام بدیم.
با استفاده از متد getAttribute میتونیم به راحتی مقدار صفت یک عنصر رو بدست آوریم.
شکل کلی برای استفاده از متد getAttribute :
|
1 |
Element.getAttribute( Name_Attribute ); |
- Element : اون تگ یا عنصری که میخوایم صفتش بدست بیاریم
- Name_Attribute : نام اون صفتی که میخوایم مقدارش بدست بیاریم
مثال شماره ۱ : بدست آوردن مقدار صفت href از تگ a ( لینک )
|
1 2 3 4 5 6 7 8 9 10 |
<script> function Get(){ var a = document.getElementById("MyLink"); var result = document.getElementById("Result"); result.innerHTML = a.getAttribute('href'); } </script> |
مثال شماره ۲ : بدست آوردن مقدار صفت id و title از تگ P
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script> function Get(){ var a = document.getElementById("MyP"); var result = document.getElementById("Result"); var b = a.getAttribute('title'); var c = a.getAttribute('id'); result.innerHTML = "Title = " + b + "<br>" + "ID = " + c; } </script> |
Free-Learn
بدست آوردن صفت + مقدار بصورت مستقیم
خب دوستان ما علاوه بر اون متد getAttribute ، یه روشی داریم که میتونیم بصورت مستقیم صفت و مقدار یک عنصر رو بدست آوریم، ولی خب اینم بگم که این روش بروی همه ی صفات عمل نمیکنه، ولی خب بروی اکثر صفات عمل میکنه و میتونه کارمون رو راه بندازه.
شکل کلی استفاده از این روش بصورت زیر می باشد :
|
1 |
Element.Name_Attribute; |
- Element : اون عنصر یا تگ
- Name_Attribute : نام اون صفتی که میخوایم بدست بیاریم
مثال شماره ۱ : بدست آوردن صفت value از تگ input
|
1 2 3 4 5 6 7 8 9 10 |
<script> function Get(){ var a = document.getElementById("MyInput"); var result = document.getElementById("Result"); result.innerHTML = a.value; } </script> |
Free-Learn
کار با متد setAttribute
فک کنم از اسم این متد مشخص باشه که چکار میتونه کنه!؟ همونطور که از اسمش مشخصه با استفاده از این متد میتونیم برای یک تگ یک صفت + مقدار مشخص کنیم.
شکل کلی برای استفاده از این متد :
|
1 |
Element.setAttribute( Name , Value ); |
- Name : نام صفت
- Value : مقدار صفت
مثال شماره ۱ : ما یک تگ a ایجاد کردیم ولی خب براش href مشخص نکردیم، میخوایم با استفاده از جاوا اسکریپت صفت href بهمراه مقدار ( آدرس سایت فری لرن ) رو براش مشخص کنیم.
|
1 2 3 4 5 6 7 8 |
<script> function Set(){ var a = document.getElementById("MyLink"); a.setAttribute('href','https://free-learn.ir/'); } </script> |
مثال شماره ۲ : تنظیم صفت src ( یا بطور کلی تغییر تصویر ) با کلیک بروی دکمه ( استفاده از روش مستقیم )
|
1 2 3 4 5 6 7 8 |
<script> function Change(){ var a = document.getElementById("MyImg"); a.src = "logo.png"; } </script> |
Free-Learn
کار با متد removeAttribute
این متد removeAttribute هم که دیگه مشخصه، با استفاده از آن میتوان صفت یک تگ رو حذف کرد.
شکل کلی :
|
1 |
Element.removeAttribute( Name_Attribute ); |
- Element : اون تگ یا عنصری که میخوایم صفتش رو حذف کنیم
- Name_Attribute : نام اون صفتی که میخوایم حذف کنیم
مثال : حذف کردن صفت href از تگ a
|
1 2 3 4 5 6 7 8 |
<script> function Del(){ var a = document.getElementById("MyLink"); a.removeAttribute('href'); } </script> |
