خصوصية <id> HTML

التعريف والاستخدام

id تحدد الخاصية id الفريد للعنصر. (يجب أن يكون هذا القيمة فريدة في وثيقة HTML).

id تستخدم الخاصية غالبًا للإشارة إلى النمط في جدول النمط، واستخدام JavaScript (من خلال HTML DOM) للتعامل مع العناصر التي تحتوي على id معين.

id يمكن استخدام الخاصية أيضًا كرابط مرجع (link anchor).

انظر أيضًا:

دليل HTML:HTML id

دليل HTML:خصوصية HTML

دليل CSS:قواعد CSS

دليل CSS:CSS #id مصنف

دليل HTML DOM:مетод getElementById() في HTML DOM

دليل HTML DOM:خاصية id في HTML DOM

دليل HTML DOM:عنصر <Style> DOM HTML

مثال

مثال 1

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

<html>
<body>
<h1 id="myHeader">مرحبًا بالعالم!</h1>
<button onclick="displayResult()">تغيير النص</button>
<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "تناول يومًا مميزًا!";
}
</script>
</body>
</html>

تجربة بنفسك

تقدم الصفحة أدناه أمثلة إضافية.

النحو

<العنصر id="id">

قيمة الخاصية

القيمة الوصف
id

تحديد id فريد للعنصر. قواعد التسمية:

  • يجب أن تحتوي على على الأقل رمز واحد
  • لا يمكن أن تحتوي على أي مسافات

مزيد من الأمثلة

مثال 2

استخدام خاصية id للروابط إلى عنصر في الصفحة يحتوي على id معين:

<html>
<body>
<h2><a id="top">عنوان معين</a></h2>
<p>كثير من النصوص ....</p>
<p>كثير من النصوص ....</p>
<p>كثير من النصوص ....</p>
<a href="#top">العودة إلى الأعلى</a>
</body>
</html>

تجربة بنفسك

مثال 3

استخدام خاصية <id> لإنشاء النص بأسلوب CSS:

<html>
<head>
<style>
#myHeader {
  color: red;
  text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">CaseW3C.com هو الأفضل!</h1>
</body>
</html>

تجربة بنفسك

دعم المتصفحات

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
الدعم الدعم الدعم الدعم الدعم