دروس

المعرف HTML id

معرف اتش تي ام ال Html id

المحتويات

 

استخدام سمة المعرف HTML id

تحدد السمة id معرفًا فريدًا لعنصر HTML يجب أن تكون القيمة فريدة في مستند HTML

يمكن استخدام قيمة المعرف بواسطة CSS و  JavaScript لتنفيذ مهام معينة للعنصر مع قيمة المعرف المحددة.

في CSS لتحديد عنصر ذي معرف محدد اكتب حرف التجزئة (#) ، متبوعًا بمعرف العنصر:

استخدم CSS لتصميم عنصر بمعرف "myHeader":

<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>

<h1 id="myHeader">My Header</h1>

تلميح: يمكن استخدام سمة المعرف في أي عنصر HTML

ملاحظة: قيمة المعرف حساسة لحالة الأحرف.

ملاحظة: يجب أن تحتوي قيمة المعرف على حرف واحد على الأقل ويجب ألا تحتوي على مسافة بيضاء (مسافات وعلامات تبويب وما إلى ذلك).

الفرق بين الفئة Class والمعرف Id

يمكن أن يحتوي عنصر HTML على معرّف فريد واحد فقط ينتمي إلى هذا العنصر المنفرد بينما يمكن استخدام اسم فئة بواسطة عناصر متعددة:

<style>

#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}

.cities {
  background-color: gray;
  color: white;
  margin: 25px;
  padding: 2520px;
} 
</style>

<!-- عنصر فريد  -->
<h1 id="myHeader">مدن</h1>

<!-- عناصر مماثلة متعددة --> 
<h2 class="cities">طرابلس</h2>

<h2 class="cities">مصراته </h2>  

<h2 class="cities">زوارة</h2>

 

الإشارات المرجعية مع المعرف والروابط

يتم استخدام إشارات HTML المرجعية للسماح للقراء بالانتقال إلى أجزاء محددة من صفحة الويب

يمكن أن تكون الإشارات المرجعية مفيدة إذا كانت صفحة الويب طويلة جدًا.

لإنشاء إشارة مرجعية يجب أولاً إنشاء الإشارة المرجعية ثم إضافة رابط إليها.

عند النقر على الرابط ستنتقل الصفحة إلى الموقع مع الإشارة المرجعية.

أولاً قم بإنشاء إشارة مرجعية باستخدام سمة المعرف:

<h2 id="C5">الفصل الخامس</h2>

بعد ذلك أضف رابطًا إلى الإشارة المرجعية ("الانتقال إلى الفصل 5") من داخل نفس الصفحة:

<a href="#C5"> الانتقال إلى الفصل 5</a>

أو أضف رابطًا إلى الإشارة المرجعية ("الانتقال إلى الفصل 5") من صفحة أخرى:

<a href="index.html#C5"> الانتقال إلى الفصل 5</a>

 

استخدام سمة معرف id في جافا سكريبت

يمكن لـ JavaScript الوصول إلى عنصر بمعرف محدد باستخدام getElementById ():

استخدم سمة id لمعالجة النص باستخدام JavaScript

<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "مدن ليبية";
}
</script>

 

 

دروس لغة Html اخرى