HTML المعرف

HTML المعرف

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.

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

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

الفرق بين الطبقة والمعرف

يمكن أن يحتوي عنصر 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>

<!-- A unique element -->

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

<!-- Multiple similar elements -->

<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>

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

يتم استخدام إشارات 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 الوصول إلى عنصر ذي معرف محدد باستخدام getElementById()الطريقة:

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

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