الوصول لخصائص العناصر
تعديل خصائص العنصر في جافاسكربت
الكائن
في هذا الدرس ستتعلم كل الطرق التي يمكنك من خلالها التعامل مع خصائص العناصر بواسطة جافاسكربت.
الحصول على قيمة الخاصية
يمكنك استخدام الدالة
يجب تمرير إسم الخاصية التي تريد الحصول على قيمتها كنص للدالة.
في المثال التالي قمنا بإنشاء كائن يمثل العنصر الذي يملك id يساوي
بعدها قمنا بعرض قيمة الخاصية
مثال
<!DOCTYPE html>
<html>
<body>
<h1>JS Get Attribute</h1>
<p>You can use the "getAttribute()" method to get the value of any attribute in the element.</p>
<p><a id="demo" href="https://codafox.blogspot.com">Home Page</a></p>
<script>
// element في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك
var element = document.getElementById('demo');
// link في متغير إسمه element الموجودة في العنصر الذي يمثله المتغير href هنا قمنا بتخزين قيمة الخاصية
var link = element.getAttribute('href');
// في آخر الصفحة link هنا قمنا بعرض قيمة المتغير
document.write('link = ' + link);
</script>
</body>
</html>إضافة خاصية جديدة / تحديث قيمتها
يمكنك استخدام الدالة
يجب تمرير إسم الخاصية و القيمة التي تريد إعطاءها للعنصر كنصوص للدالة.
في المثال التالي قمنا بإنشاء كائن يمثل العنصر الذي يملك id يساوي
بعدها قمنا بإعطائه الخاصية و القيمة
المثال الأول
<!DOCTYPE html>
<html>
<body>
<h1>JS Set Attribute</h1>
<p>You can use the "setAttribute()" method to set the value of
any attribute in the element or to add a new attribute to it.</p>
<p><a id="demo" href="htthttps://codafox.blogspot.com/">Home Page</a></p>
<script>
// element في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك
var element = document.getElementById('demo');
// element للعنصر الذي يمثله المتغير target="_blank" هنا قمنا بإضافة الخاصية و القيمة
// ملاحظة: هذه الخاصية تجعل الرابط يفتح في صفحة جديدة عندما يتم النقر عليه
element.setAttribute('target', '_blank');
</script>
</body>
</html><!DOCTYPE html>
<html>
<body>
<h1>JS Set Attribute</h1>
<p>You can use the "setAttribute()" method to set the value of
any attribute in the element or to add a new attribute to it.</p>
<p><a id="demo" href="htthttps://codafox.blogspot.com/">Home Page</a></p>
<script>
// element في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك
var element = document.getElementById('demo');
// element للعنصر الذي يمثله المتغير target="_blank" هنا قمنا بإضافة الخاصية و القيمة
// ملاحظة: هذه الخاصية تجعل الرابط يفتح في صفحة جديدة عندما يتم النقر عليه
element.setAttribute('target', '_blank');
</script>
</body>
</html>في المثال التالي قمنا بإنشاء كائن يمثل العنصر الذي يملك id يساوي
بعدها قمنا بإعطائه الخاصية و القيمة
المثال الثاني
<!DOCTYPE html>
<html>
<body>
<h1>JS Set Attribute</h1>
<p>You can use the "setAttribute()" method to set the value of
any attribute in the element or to add a new attribute to it.</p>
<p><button id="demo">Disabled Button</button></p>
<script>
// element في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك
var element = document.getElementById('demo');
// element للعنصر الذي يمثله المتغير disabled هنا قمنا بإضافة الخاصية
// ملاحظة: هذه الخاصية جعلت العنصر غير مفعّل، أي لا يمكن النقر عليه
element.setAttribute('disabled', '');
</script>
</body>
</html>حذف خاصية موجودة في العنصر
يمكنك استخدام الدالة
يجب تمرير إسم الخاصية التي تريد إزالتها من العنصر كنص للدالة.
في المثال التالي قمنا بإنشاء كائن يمثل العنصر الذي يملك id يساوي
بعدها قمنا بإزالة الخاصية
مثال
<!DOCTYPE html>
<html>
<body>
<h1>JS Remove Attribute</h1>
<p>You can use the "removeAttribute()" method to remove any attribute in the element.</p>
<p><a id="demo" href="https://harmash.com">Home Page</a></p>
<script>
// element في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك
var element = document.getElementById('demo');
// element من العنصر الذي يمثله المتغير href هنا قمنا بإزالة الخاصية
// منه href لاحظ أن الرابط أصبح يظهر كنص عادي بعد أن تم إزالة الخاصية
element.removeAttribute('href');
</script>
</body>
</html>التعامل مع الخصائص على اختلاف أنواعها
الخصائص الجاهزة في HTML مثل الخاصية
في المثال التالي قمنا بإنشاء كائن يمثل العنصر الذي يملك id يساوي
بعدها قمنا بإضافة الخاصية
في النهاية قمنا بعرض قيمة الخاصية
مثال
<!DOCTYPE html>
<html>
<body>
<h1>JS Set / Get Element Attribute</h1>
<p>Element attributes can be accessed as element properties.</p>
<img id="demo"/>
<hr>
<script>
// element في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك
var element = document.getElementById('demo');
// element للعنصر الذي يمثله المتغير src هنا قمنا بتحديد قيمة الخاصية
// فعلياً قمنا بتمرير مسار الصورة التي سيتم عرضها فيه
element.src = 'https://alnajm1.github.io/CodaFox/HTML%20CODAFOX.png';
// element التي يمكلها العنصر الذي يمثله المتغير src هنا قمنا بطابعة قيمة الخاصية
document.write('Image source = ' + element.src);
</script>
</body>
</html>من الأفضل التعامل مع خصائص الكائنات بواسطة الدوال
كمثال على الخصائص التي قد يضيفها المطور على وسوم HTML فإننا في موقع هرمش قمنا بتطوير خاصية إسمها