استفاده از ویژگی ID
صفت ID در HTML برای تعیین کردن یک شناسه منحصر به فرد برای یک عنصر HTML به کار می رود.
id در HTML باید در سند صفحه html منحصر به فرد باشد. ویژگی ID به منظور اشاره کردن به یک style در یک صفحه css به کار می رود. ویژگی ID همچنین توسط جاوا اسکریپت برای دسترسی به یک عنصر و دستکاری آن با یک id مشخص به کار می رود.
قاعده نوشتاری برای سلکتور id:
برای درنظر گرفتن استایل برای یک سلکتور id ابتدا یک علامت # و سپس شناسه ای را که برای صفت id عنصر منحصر به فرد مشخص کرده اید، بنویسید و سپس، مشخصه های CSS را درون { } تعریف کنید.
در مثال زیر ما یک عنصر < h1 > داریم که دارای id به نام "myHeader" است. عنصر < h1 > بر اساس تعریف myHeader# در بخش head استایل داده شده است:
حال فقط و فقط همان عنصر h1 که شناسه myHeader را گرفته است، ویژگی های CSS را دریافت کرده، که در زیر قابل مشاهده است:
تفاوت انتخابگرهای class و id
یک class می تواند توسط چند عنصر HTML استفاده شود، در صورتی که یک id فقط باید توسط یک عنصر HTML در درون صفحه استفاده شود:
مشاهده می کنید که شناسه myHeader فقط توسط عنصر h1 استفاده شده است اما کلاس city توسط تعدادی عنصر h2 استفاده شده است.
نشانه گذاری با استفاده از id و لینک ها
برای استفاده از یک نشانه (bookmark)، ابتدا باید آن را ساخته و سپس به آن لینک اضافه کنید. سپس، وقتی که لینک کلیک شود، صفحه با استفاده از آن نشانه به قسمت مورد نظر هدایت می شود.
مثال
ابتدا، یک نشانه را با استفاده از ویژگی ID در HTML به شکل زیر می سازیم:
سپس، یک لینک به نشانه ای که ساختیم، با استفاده از تگ a ایجاد می کنیم.
حال هرگاه روی لینک اول کلیک شود، شما به بخشی که عنصر h2 شناسه ای با نام C4 را دارد هدایت می شوید.
شما همچنین می توانید به یک نشانه (bookmark) که در یک صفحه دیگر قرار دارد، یک لینک ایجاد کنید. شکل زیر نحوه انجام این کار را نشان می دهد:
استفاده از ویژگی ID در جاوا اسکریپت
ویژگی id همچنین می تواند توسط جاوا اسکریپت و برای انجام دادن برخی عملیات بر روی یک عنصر خاص استفاده شود. جاوا اسکریپت می تواند با استفاده از یک id و با متد ()getElementById به یک عنصر html دسترسی داشته باشد.
در این کد، هنگام کلیک بر روی دکمه Change text، تابع ()displayResult فراخوانی شده و جاوا اسکریپت عنصر با شناسه myHeader را دریافت کرده و متن درون آن را تغییر می دهد.
