التحكم بميزات عناصر html عبر javascript
سنشرح اليوم عن كيفية التحكم بميزات عناصر html عبر لغة JavaScript و سنشرح ايضاً عن كيفية تحديد العناصر عبر الكلاس class.لننشأ عنصر img في ملف html و نعطيه id و class
<body>
<img src="" id="logo" class="classLogo" />
</body>
وفي الجافا سكربت يكون
عبر الـ class
var classLogo = document.getElementsByClassName("classLogo");
classLogo.
وعند كتابة classLogo في السطر الجديد سوف نلاحظ انه توصلنا على صلاحيات استخدام الكلاس عبر ظهور بعض الخواص.
عبر الـ id
var idLogo = document.getElementById("logo");
idLogo.
عند الضغط على النقطة سنلاحظ ظهور بعض خواص الصلاحيات الذي يمكن ان نستخدمها
عناصر مهمة للتحكم بـ html عبر جافاسكربت
يتوفر عدة عناصر تسهل لنا التحكم بعناصر html بسهولة من خلال الجافاسكربت و هيالعنصر hasAtterbute
مثال 1
<body>
<img src="" id="logo" class="classLogo" />
</body>
سنستخدم الجافاسكربت للكشف عن ميزة ما عبر hasAttribute و نرى عن طريقها هل العنصر img يمتلك src أم لا
var idLogo = document.getElementById("logo");
if(idLogo.hasAttribute("src")){
alert("yes")
}
هنا يكون العنصر img يمتلك src فإنه سيطبع لنا yes
سوف يتم تحقق الشرط لأن العنصر img يمتلك Atterbute من نوع src فإنه طبع yes, وأذا كان العنصر الذي قمنا بتحديده لا يمتلك src فإنه لن يتحقق الشرط و بالتالي لن يتم تنفيذ الأوامر داخل الاقواس المعكوفة الذي ضمن alert.
العنصر getAtterbute
مثال 2نريد ان نستعرض الـ id عبر الخاصية getAtterbute في الـ console
var idLogo = document.getElementById("logo");
console.log(idLogo.getAtterbute("id"));
عندما نستعرضه عبر console
كما لاحظنا اتى لنا بمحتوى id الذي هو logo و اذا غيرنا القيمة لـ class سوف يعرض لنا classLogo.
العنصر setAtterbute
مثال 3
سنستخدم العنصر setAtterbute الذي تكون مهمته هي اضافة قيمة جديدة لأي عنصر من عناصر html أو تعديل على القيمة السابقة.
var idLogo = document.getElementById("logo");
console.log(idLogo.getAtterbute("id"));
idLogo.setAtterbute("src","tr.jpg");
و عندما نفتح ملف html تكون النتيجة هي
كما نلاحظ انه استبدل لنا قيمة src القديمة بقيمة جديدة و هي صورة قد وضعتها في مجلد العمل الحالي, كما نستطيع التحكم بـ width و height للصورة عن طريق الجافاسكربت كما سنلاحظ الآن.
مثال 4
<body>
<img src="" id="logo" class="classLogo" width="" height=""/>
</body>
و نقوم بتعيين القيم عبر الجافاسكربت كما يلي
var idLogo = document.getElementById("logo");
console.log(idLogo.getAtterbute("id"));
idLogo.setAtterbute("src","tr.jpg");
idLogo.setAtterbute("width","40%");
idLogo.setAtterbute("height","300px");
و نتيجة المتصفح
كما نلاحظ قد تم تغيير حجم الصورة بسهولة عبر الجافاسكربت
العنصر removeAtterbute
مثال 5
نستطيع حذف اي ميزه من html عبر removeAtterbute.
var idLogo = document.getElementById("logo");
console.log(idLogo.getAtterbute("id"));
idLogo.setAtterbute("src","tr.jpg");
idLogo.setAtterbute("width","40%");
idLogo.setAtterbute("height","300px");
idLogo.removeAtterbute("class");
idLogo.removeAtterbute("width");
لنرى الكود عبر اداة Inspector هل تم حذف ما تم تحديده ام لا
قناتنا التلغرام
https://t.me/Programmer_Tech
المدونة
https://www.programmer-tech.com
صفحة الفيسبوك
https://www.facebook.com/ProgrammerTech.net
قناة اليوتيوب 1:
https://www.youtube.com/ahmadkaissar
قناة اليوتيوب 2:
https://www.youtube.com/MuhammadAlush0997
https://t.me/Programmer_Tech
المدونة
https://www.programmer-tech.com
صفحة الفيسبوك
https://www.facebook.com/ProgrammerTech.net
قناة اليوتيوب 1:
https://www.youtube.com/ahmadkaissar
قناة اليوتيوب 2:
https://www.youtube.com/MuhammadAlush0997