ویژگی ID (شناسه) در زبان نشانه گذاری HTML (اچ تی ام ال)

زمان مطالعه

5 دقیقه

تعداد بازدید

تعداد پرسش ها

افزودن به لیست علاقه مندی ها

برچسب ها :

اشتراک گذاری این مطلب

دسته بندی مطالب

ویژگی ID (شناسه) در زبان نشانه گذاری HTML (اچ تی ام ال)

زمان مطالعه

5 دقیقه

تعداد بازدید

تعداد پرسش ها

افزودن به لیست علاقه مندی ها

برچسب ها :

اشتراک گذاری این مطلب

در مقاله قبل در مورد کلاس ها (Classes) در زبان نشانه گذاری HTML صحبت کردیم و گفتیم که برای استایل دهی چند عنصر به شکل مشابه می توانیم از ویژگی کلاس (Class Attribute) استفاده کنیم

اما در بعضی اوقات شما نیاز دارید که یک عنصر HTML دارای استایل متفاوتی از همه عناصر در صفحه باشد، یا اینکه بخواهید عمل خاصی بر روی یک عنصر انجام دهید، یا لینک به صفحه یا قسمتی از یک صفحه بدهید، در این مواقع می توانید از ویژگی Id در زبان نشانه گذاری 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 در 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 و Class در HTML

نشانه گذاری در صفحه با 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 در زبان برنامه نویسی جاوااسکریپت

بعد از کلیک بر روی دکمه و تغییر متن:

استفاده از ویژگی Id در زبان برنامه نویسی جاوااسکریپت

خلاصه مقاله

ویژگی Id برای تعیین یک شناسه منحصر به فرد برای یک عنصر در زبان نشانه گذاری HTML استفاده می شود.

مقدار ویژگی Id باید در سند HTML منحصر به فرد باشد.

ویژگی Id توسط CSS و JavaScript برای انتخاب و استایل دهی یک عنصر خاص استفاده می شود.

مقدار ویژگی Id به حروف بزرگ و کوچک حساس است.

ویژگی id همچنین برای ایجاد نشانه گذاری و لینک دهی (همان نشانک ها در HTML) استفاده می شوند.

جاوااسکریپت (JavaScript) می تواند با متد getElementById() به عنصری با شناسه خاص دسترسی داشته باشد.

خب به پایان یکی دیگر از مقالات زبان نشانه گذاری HTML رسیدیم و کار با ویژگی Id را یاد گرفتیم.

در مقاله بعدی HTML به مبحث مهم Iframe ها می پردازیم که برای نمایش یک صفحه وب درون یک صفحه وب دیگر استفاده می شود، در اصل یک قاب درون خطی ایجاد می کند.

ویژگی کلاس (Class) در زبان نشانه گذاری HTML (خصوصی...

تگ iframe در زبان نشانه گذاری HTML