اذهب إلى المحتوى
  • 0

ما هو الفرق بين  attribute  و  property؟

أحمد مراد

السؤال

Recommended Posts

  • 0

يمكن ايجاد الفرق بين عنصري property وّ attribute في برمجة الويب، خصوصا عند التحدث عن DOM.

بخصوص property يمكن الحصول على قيم مختلف الخصائص properties المتعلقة بوسوم html، حيث نحصل على أنواع مختلف من القيم: boolean، string...  من خلال استعمال خاصية prop علىjQuery كما هو موضح أسفله:

لديناوسم الرابط
<a href='page2.html' class='link classes' name='linkName' id='linkID'>Hi</a>
 property لاستخراج قيم jQueryعند استعمال كود

$('#linkID').prop('href'); // returns "http://example.com/page2.html"
$('#linkID').prop('name'); // returns "linkName"
$('#linkID').prop('id'); // returns "linkID"
$('#linkID').prop('className'); // returns "link classes"

يمكن تغيير و تحديث قيم Prop من خلال jQuery بواسط الكود:

<a href='page2.html'>Hi</a>

$('#linkID').prop('href', 'page1.html');
$('#linkID').prop('href'); // returns "http://example.com/page1.html"

بالنسبة لـattribute تتعلق بلغة html اكثر منDOM، ويمكن ملاحظة الفرق مع خاصية property من خلال الكود التالي:

<input type="checkbox" checked=true/>

$('input').prop('checked'); // returns true
$('input').attr('checked'); // returns "checked"

تتميز خاصية attribute بحفاظها على القيم الافتراضية التي أخذها الوسم (default value)، ويمكن اعتبارها ميزة في بعض  الأحيان، كما قد تعطي القيمة الخطأ للمبرمج في حين تم تحيين قيمة الوسم، كمثال لذلك:

<input type="text" name="username" value="user123">

$('input').prop('value', '456user');
$('input').prop('value'); // returns "456user"
$('input').attr('value'); // returns "user123"

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...