این آموزش در تاریخ ۱۴۰۱/۰۴/۱۹ آپدیت شده است.
کار با صفات عناصر در جاوا اسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با صفات عناصر در جاوا اسکریپت با من همراه باشید.
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 |
<script> function Get(){ var MyLink = document.getElementById("MyLink"); var Result = document.getElementById("Result"); Result.innerHTML = MyLink.getAttribute("href"); } </script> |
مثال شماره ۲ : بدست آوردن مقدار صفت id و title از تگ P
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> function Get(){ var MyTag = document.getElementById("MyP"); var Result = document.getElementById("Result"); var A = MyTag.getAttribute('title'); var B = MyTag.getAttribute('id'); Result.innerHTML = "Title = " + A + "<br>" + "ID = " + B; } </script> |
مثال شماره ۳ : با کلیک بروی یک دکمه، آدرس URL یک عکس رو به نمایش درمیاریم
|
1 2 3 4 5 6 7 8 9 |
<script> function Get(){ var MyTag = document.getElementById("MyImage"); var Result = document.getElementById("Result"); Result.innerHTML = MyTag.getAttribute('src'); } </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 MyLink = document.getElementById("MyLink"); MyLink.setAttribute("href" , "https://free-learn.ir/"); } </script> |
مثال شماره ۲ : میخوایم یک آدرس URL عکس از کاربر بگیریم بعدش همون آدرس رو برای تگ IMG ست کنیم
|
1 2 3 4 5 6 7 8 9 |
<script> function SetUrl(){ var URL = document.getElementById("URL"); var MyImage = document.getElementById("MyImage"); MyImage.setAttribute("src" , URL.value); } </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 MyLink = document.getElementById("MyLink"); MyLink.removeAttribute("href"); } </script> |
