سمة معرف HTML
يتم استخدام سمة HTML idلتحديد معرف فريد لعنصر HTML.
لا يمكن أن يكون لديك أكثر من عنصر واحد بنفس المعرف في مستند HTML.
استخدام سمة المعرف
تحدد السمة idمعرفًا فريدًا لعنصر HTML. يجب أن تكون قيمة id
السمة فريدة في مستند HTML.
تُستخدم idالسمة للإشارة إلى إعلان نمط معين في ورقة أنماط. يتم استخدامه أيضًا بواسطة JavaScript للوصول إلى العنصر ومعالجته بالمعرف المحدد.
بناء جملة المعرف هو: اكتب حرف تجزئة (#) ، متبوعًا باسم معرف. بعد ذلك ، حدد خصائص CSS داخل الأقواس المتعرجة {}.
في المثال التالي لدينا <h1>عنصر يشير إلى اسم المعرف "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>
ملاحظة: اسم المعرف حساس لحالة الأحرف!
ملاحظة: يجب أن يحتوي اسم المعرف على حرف واحد على الأقل ، ولا يمكن أن يبدأ برقم ، ويجب ألا يحتوي على مسافات (مسافات ، وعلامات جدولة ، وما إلى ذلك).
الفرق بين الفئة والمعرف
يمكن استخدام اسم فئة بواسطة عدة عناصر HTML ، بينما يجب استخدام اسم معرف بواسطة عنصر HTML واحد فقط داخل الصفحة:
مثال
<style>
/* Style the element with the id "myHeader"
*/
#myHeader {
background-color: lightblue;
color: black;
padding:
40px;
text-align: center;
}
/* Style all
elements with the class name "city" */
.city
{
background-color: tomato;
color: white;
padding: 10px;
}
</style>
<!-- An element with a unique id -->
<h1 id="myHeader">My
Cities</h1>
<!-- Multiple elements with same class -->
<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 مع المعرف والروابط
تُستخدم إشارات HTML المرجعية للسماح للقراء بالانتقال إلى أجزاء معينة من صفحة الويب.
يمكن أن تكون الإشارات المرجعية مفيدة إذا كانت صفحتك طويلة جدًا.
لاستخدام إشارة مرجعية ، يجب عليك أولاً إنشاؤها ، ثم إضافة ارتباط إليها.
بعد ذلك ، عند النقر على الرابط ، ستنتقل الصفحة إلى الموقع الذي يحتوي على الإشارة المرجعية.
مثال
أولاً ، قم بإنشاء إشارة مرجعية idبالسمة:
<h2 id="C4">Chapter 4</h2>
بعد ذلك ، أضف ارتباطًا للإشارة المرجعية ("الانتقال إلى الفصل 4") ، من داخل نفس الصفحة:
مثال
<a href="#C4">Jump to Chapter 4</a>
أو قم بإضافة ارتباط إلى الإشارة المرجعية ("الانتقال إلى الفصل 4") ، من صفحة أخرى:
<a href="html_demo.html#C4">Jump to Chapter 4</a>
استخدام سمة المعرف في JavaScript
يمكن idأيضًا استخدام السمة بواسطة JavaScript لتنفيذ بعض المهام لهذا العنصر المحدد.
يمكن لـ JavaScript الوصول إلى عنصر بمعرف محدد getElementById()بالطريقة:
مثال
استخدم idالسمة لمعالجة النص باستخدام JavaScript:
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
نصيحة: ادرس JavaScript في فصل HTML JavaScript ، أو في برنامج JavaScript التعليمي .
ملخص الفصل
- يتم
idاستخدام السمة لتحديد معرف فريد لعنصر HTML - يجب أن تكون قيمة
idالسمة فريدة في مستند HTML - يتم
idاستخدام السمة بواسطة CSS و JavaScript لتصميم / تحديد عنصر معين - قيمة
idالسمة حساسة لحالة الأحرف - تُستخدم
idالسمة أيضًا لإنشاء إشارات مرجعية بتنسيق HTML - يمكن لـ JavaScript الوصول إلى عنصر بمعرف محدد بهذه
getElementById()الطريقة