خصائص id في HTML

HTML id يستخدم الخاصية للتحديد ID الفريد للعنصر في HTML.

لا يمكن أن يكون هناك عناصر متعددة في وثيقة HTML تحتوي على نفس ID.

استخدام الخاصية id

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

id يستخدم الخاصية للإشارة إلى إعلان النمط المحدد في جدول النمط. يمكن للـ JavaScript أيضًا استخدامه للوصول إلى العناصر التي تحتوي على ID معين.

نظام id هو: اكتب علامة الـ (#) مسبوقة باسم id. ثم، قم بتعريف خصائص CSS داخل الأقواس الكبيرة {}.

في المثال التالي لدينا <h1> الذي يشير إلى اسم id "myHeader". هذا <h1> العنصر سينقذ بناءً على عنصر #myHeader يتم تعيين النمط من خلال التعريفات الستايلية لتحديد النمط:

مثال

<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">My Header</h1>
</body>
</html>

جربها بنفسك

ملاحظة:اسم id حساس للغاية للكتابة.

ملاحظة:يجب أن يحتوي id على على الأقل حرفًا واحدًا وأن لا يحتوي على مسافات (فضاءات، tabs، إلخ).

الفرق بين الصنف والid

يمكن استخدام نفس اسم الصنف من قبل عدة عناصر HTML، بينما يمكن استخدام اسم id فقط من قبل عنصر واحد في الصفحة:

مثال

<style>
/* تعيين النمط لعنصر يحتوي على id "myHeader" */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
/* تعيين النمط لجميع العناصر التي تحتوي على اسم الصنف "city" */
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>
<!-- عنصر يحتوي على id فريد -->
<h1 id="myHeader">My Cities</h1>
<!-- عدة عناصر تحتوي على نفس اسم الصنف -->
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

جربها بنفسك

إشارة:يرجى زيارة دليل دروس CSS للتعلم المزيد عن CSS.

تحقيق وسم HTML من خلال ID والرابط

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

إذا كانت الصفحة طويلة، فإن الوسم قد يكون مفيدًا جدًا.

لإستخدام الوسم، يجب عليك أولاً إنشائه، ثم إضافة رابط إليه.

ثم، عند النقر على الرابط، سينقذ الصفحة إلى موضع يحتوي على وسم.

مثال

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

<h2 id="C4">الفصل الرابع</h2>

ثم، في نفس الصفحة، أضف رابط إلى هذا العلامة المرجع ("إذهب إلى الفصل الرابع"):

مثال

<a href="#C4">إذهب إلى الفصل الرابع</a>

جربها بنفسك

أو، في صفحة أخرى، أضف رابط إلى هذا العلامة المرجع ("إذهب إلى الفصل الرابع"):

<a href="html_demo.html#C4">إذهب إلى الفصل الرابع</a>

استخدام خاصية id في JavaScript

يمكن لـ JavaScript أيضًا استخدام خاصية id للتنفيذ بعض المهام للعنصر المحدد.

يمكن استخدام JavaScript getElementById() طريقة الوصول إلى العنصر الذي يحتوي على id معين:

مثال

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

<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>

جربها بنفسك

إشارة:يرجى JavaScript في HTML في هذا الفصل، أو في دليل دروس JavaScript تعلم JavaScript في هذا الفصل.

ملخص هذا الفصل

  • id تستخدم الخاصية لتعيين id فريد للعنصر HTML
  • id يجب أن تكون قيمة الخاصية فريدة في مستند HTML
  • يمكن استخدام CSS وJavaScript id استخدام الخاصية لاختيار العنصر أو تعيين نمط للعنصر المحدد
  • id قيمة الخاصية تفرق بين الحروف الكبيرة والصغيرة
  • id يمكن استخدام الخاصية أيضًا لإنشاء علامة مرجع HTML
  • يمكن استخدام JavaScript getElementById() طريقة الوصول إلى العنصر الذي يحتوي على id معين