recent
أخبار ساخنة

التحكم بميزات عناصر html عبر لغة الجافاسكربت JavaScript الدرس |26|

Ahmed kaissar
الصفحة الرئيسية

التحكم بميزات عناصر 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
google-playkhamsatmostaqltradent