آی‌دی و خصوصیت id در HTML

خصوصیت آی دی یا id یکی از خصوصیت‌های عمومی یا سراسری در HTML است که امکان تخصیص شناسه منحصربفرد به المان های مختلف اچ‌تی‌ام‌ال را فراهم می‌کند. (id از ابتدای واژه identifier به معنای شناسه یا مشخص‌کننده گرفته شده است).

نحوه تخصیص آی دی (id) به المان ها در اچ‌تی‌ام‌ال و جزئیات آن

برای تخصیص آی‌دی به یک المان HTML کافیست مشابه با مثال زیر، برای خصوصیت id در تگ شروع المان، مقداری را به عنوان یک شناسه منحصربفرد درج کنید. برای مثال در نمونه زیر به یک المان <p> (یا پاراگراف)، آی‌دی یا شناسه منحصربفردی با نام myid اختصاص داده شده است.

<p id="myid">This is a simple paragraph.</p>

مقدار خصوصیت id می‌بایست میان تمام المان های موجود در یک سند HTML مقدار منحصربفردی باشد. به عبارت بهتر هیچ دو المانی در یک سند یا صفحه وب نباید مقادیر یکسانی برای خصوصیت id داشته باشند. درست برخلاف خصوصیت class در HTML که می‌توان از یک مقدار یا کلاس ثابت برای چند المان مختلف استفاده کرد.

نکته 1: از خصوصیت id می‌توان برای تخصیص آی دی به هر نوع المان HTML استفاده کرد.

نکته 2: هر المان HTML می‌تواند به طور معمول حداکثر یک شناسه داشته باشد. به علاوه مقدار خصوصیت id باید فاقد فاصله، تب و … باشد. برخلاف مقدار خصوصیت class که در آن نام کلاس‌های مختلف با کمک فاصله از یکدیگر جدا می‌شوند.

نکته 3: فراموش نکنید مقدار id در HTML به بزرگی و کوچکی حروف حساس است. بنابراین myid و myID دو شناسه متفاوت محسوب می‌شوند.

کاربردهای آی‌دی و خصوصیت id در HTML

سه کاربرد رایج برای id ها وجود دارد. مورد اول استفاده از آی‌دی‌ها در CSS برای ارجاع به المانی با id مشخص و درنتیجه امکان اعمال استایل روی المان‌ها براساس آی دی است. به علاوه در جاوااسکریپت می‌توانید براساس id به المان موردنظر دسترسی پیدا کنید و حتی در صورت نیاز آن را دستکاری کنید. همچنین می‌توانید لینکی ایجاد کنید که کاربر با کلیک روی آن به بخشی در صفحه با id مشخص هدایت شود.

تعیین استایل در CSS براساس آی دی

در CSS برای انتخاب المانی با یک آی دی مشخص و تعیین استایل برای آن می‌توان از گزینشگرها یا سلکتورهای آی‌دی کمک گرفت. به این ترتیب المانی که دارای id موردنظر است انتخاب می‌شود و هدف تعیین استایل قرار می‌گیرد.

مثال زیر نمونه‌ای از کاربرد id برای تعیین استایل را نمایش می‌دهد. در این مثال یک المان <p> دارای آی‌دی warning است. در بخش <style> با کمک سلکتور#warning  این المان برای تعیین استایل انتخاب می‌شود و رنگ زمینه آن روی زرد تنظیم می‌شود.

<!DOCTYPE html>
<html>
  <head>
    <style>
      #warning {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <p id="warning">This is a warning.</p>
    <p>This is another paragraph.</p>
  </body>
</html>

نتیجه کد فوق معمولا مشابه با نمونه زیر توسط مرورگر رندر می‌شود.

تعیین استایل المان براساس آی دی id

دسترسی به یک المان در جاوااسکریپت براساس آی‌دی

در جاوااسکریپت می‌توانید با کمک متد getElementById() به المانی با یک id مشخص دسترسی پیدا کنید. در مثال زیر با کمک کد جاوااسکریپت موجود در بخش <script>، محتویات المان دارای آی‌دی warning به Hello, World تغییر می‌کند.

<!DOCTYPE html>
<html>
  <body>
    <p id="warning">This is a warning.</p>
    <p>This is another paragraph.</p>
    <script>
      document.getElementById("warning").innerHTML = "Hello, World";
    </script>
  </body>
</html>

ارجاع یا ایجاد لینک به بخشی از صفحه

شما می‌توانید با تخصیص id به یک المان و ایجاد لینکی که به این id اشاره می‌کند امکان پرش به بخشی از صفحه را فراهم کنید. در مثال زیر کاربر با کلیک روی لینک موجود در ابتدای صفحه به بخشی با عنوان About the author (المانی دارای id برابر about) هدایت می‌شود.

See the Pen
Link to an element
by techdic (@techdic)
on CodePen.

بازگشت به فهرست مجموعه آموزشی HTML

امیرحسین شهسواری

عاشق دنیای رایانه و فناوری به خصوص برنامه نویسی هستم؛ یادگرفتن و البته یاد دادن چیزای جالبی که یاد گرفتم باعث خوشحالیم میشه و از اولویت‌های اصلی زندگیم به حساب میاد. از مدیریت و نوشتن در تک دیک هم واقعا لذت می‌برم :)

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.