تک دیک

واژه نامه و مجله آموزشی کامپیوتر و فناوری

آی‌دی و خصوصیت id در HTML
اچ‌تی‌ام‌ال 

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

به روز شده در امیرحسین شهسواری 0 دیدگاه ،،،،،،،،

خصوصیت آی دی یا 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>

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

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

بیشتر بخوانید: ایجاد لینک به یک المان یا بخشی از صفحه در HTML

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

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

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

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

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *