در مقاله قبل در مورد کلاس ها (Classes) در زبان نشانه گذاری HTML صحبت کردیم و گفتیم که برای استایل دهی چند عنصر به شکل مشابه می توانیم از ویژگی کلاس (Class Attribute) استفاده کنیم
اما در بعضی اوقات شما نیاز دارید که یک عنصر HTML دارای استایل متفاوتی از همه عناصر در صفحه باشد، یا اینکه بخواهید عمل خاصی بر روی یک عنصر انجام دهید، یا لینک به صفحه یا قسمتی از یک صفحه بدهید، در این مواقع می توانید از ویژگی Id در زبان نشانه گذاری HTML استفاده کنید.
ویژگی Id در HTML برای تعیین یک شناسه منحصر به فرد برای یک عنصر HTML استفاده می شود.
در یک سند HTML شما نمی توانید از دو Id یکسان استفاده کنید.
استفاده از ویژگی ID
ویژگی Id یک شناسه منحصر به فرد برای یک عنصر HTML ایجاد می کند، مقدار ویژگی Id باید در سند HTML منحصر به فرد باشد. (تکراری نباشد)
ویژگی Id به یک ویژگی خاص که با # در سند CSS مشخص شده است اشاره می کند، همچنین در زبان برنامه نویسی جاوااسکریپت (JavaScript) برای دسترسی و دستکاری عنصری با شناسه خاص استفاده می شود.
برای نوشتن یک استایل خاص در CSS با ویژگی Id از قاعده زیر پیروی کنید:
- 1-ابتدا یک کاراکتر # را می نویسیم
- 2-نوشتن نام Id مورد نظر به دنبال کاراکتر #
- 3-باز کردن جفت آکولاد و نوشتن استایل ها درون آن
مثال: در زیر ما یک عنصر h1 داریم که دارای Id با نام myHeader است. که استایل آن برابر استایل تعریف شده در تگ style در قسمت head سند HTML صورت می گیرد.
<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">My Header</h1>
</body>
</html>
چند نکته:
نام Id حساس به حروف بزرگ و کوچک است.
نام شناسه حداقل باید دارای یک کاراکتر باشد و نام آن نمی تواند با عدد شروع شود و نباید دارای فضای خالی (space , tab و غیره) باشد.
تفاوت Id و Class در HTML
یک نام Class می تواند توسط چندین عنصر Html استفاده شود، در حالی که یک نام Id فقط باید توسط یک عنصر در صفحه استفاده شود.
مثال زیر این تفاوت را نشان می دهد.
<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>
<!-- An element with a unique id -->
<h1 id="myHeader">My Cities</h1>
<!-- Multiple elements with same class -->
<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>
خروجی به صورت تصویر زیر است که در آن ویژگی ID منحصر به فرد است و فقط یک بار و برای یک عنصر استفاده می شود اما ویژگی Class برای چند عنصر مورد استفاده قرار گرفته است.
نشانه گذاری در صفحه با Id و لینک ها
از نشانک های HTML برای نشانه گذاری در یک صفحه وب استفاده می شود، تا کاربران بتوانند با کلیک بر روی آن ها به بخش های مختلف یک صفحه پرش کنند.
اگر صفحه وب شما طولانی باشد، نشانک ها می توانند برای شما بسیار مفید باشند.
برای استفاده از نشانک ها، ابتدا باید آن را ایجاد کنید و سپس یک لینک به آن بدهید.
سپس، وقتی روی لینک کلیک می کنید، صفحه با نشانک به مکان مورد نظر در صفحه حرکت می کند.
مثال نشانه گذاری در صفحه
ابتدا یک نشانک با ویژگی Id ایجاد کنید.
<h2 id="C4">Chapter 4</h2>
سپس یک لینک به نشانک با عنوان ("Jump to chapter 4") در همان صفحه ایجاد کنید.
<a href="#C4">Jump to Chapter 4</a>
یا یک لینک به نشانک با عنوان ("Jump to chapter 4") در صفحه دیگر ایجاد کنید.
<a href="html_demo.html#C4">Jump to Chapter 4</a>
استفاده از ویژگی Id در زبان برنامه نویسی جاوااسکریپت (JavaScript)
ویژگی Id می تواند توسط زبان برنامه نویسی جاوااسکریپت (JavaScript) برای انجام برخی کارها بر روی عنصر خاصی مورد استفاده قرار گیرد.
جاوااسکریپت (JavaScript) می تواند به یک عنصر با ویژگی Id آن با استفاده از متد ()getElementById دسترسی پیدا کند.
مثال: در زیر از ویژگی Id برای دسترسی و دستکاری کردن متن با کلیک بر روی یک دکمه در جاوااسکریپت استفاده کرده ایم.
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
قبل از کلیک دکمه و تغییر متن:
بعد از کلیک بر روی دکمه و تغییر متن:
خلاصه مقاله
ویژگی Id برای تعیین یک شناسه منحصر به فرد برای یک عنصر در زبان نشانه گذاری HTML استفاده می شود.
مقدار ویژگی Id باید در سند HTML منحصر به فرد باشد.
ویژگی Id توسط CSS و JavaScript برای انتخاب و استایل دهی یک عنصر خاص استفاده می شود.
مقدار ویژگی Id به حروف بزرگ و کوچک حساس است.
ویژگی id همچنین برای ایجاد نشانه گذاری و لینک دهی (همان نشانک ها در HTML) استفاده می شوند.
جاوااسکریپت (JavaScript) می تواند با متد getElementById() به عنصری با شناسه خاص دسترسی داشته باشد.
خب به پایان یکی دیگر از مقالات زبان نشانه گذاری HTML رسیدیم و کار با ویژگی Id را یاد گرفتیم.
در مقاله بعدی HTML به مبحث مهم Iframe ها می پردازیم که برای نمایش یک صفحه وب درون یک صفحه وب دیگر استفاده می شود، در اصل یک قاب درون خطی ایجاد می کند.


آموزش Drag And Drop (کشیدن و رها کردن) عناصر در HTML

موقعیت جغرافیایی (لوکیشن یا مکان) در HTML

چگونه از YouTube در HTML استفاده کنیم؟

افزونه ها (plug-ins) در HTML

تگ audio در HTML

تگ video در HTML

Multimedia (چند رسانه ای) در HTML

عنصر SVG در زبان نشانه گذاری HTML

عنصر canvas در زبان نشانه گذاری HTML

انواع (type) input (ورودی) در HTML