ویژگی id

---

« صفحهٔ قبل

صفحهٔ بعد »

استفاده از ویژگی id

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

مقدار id می‌تواند توسط css و جاوا اسکریپت برای انجام وظایف خاص برای عنصری با مقدار id خاص استفاده شود.

در CSS برای انتخاب یک id خاص، کاراکتر شارپ # به همراه شناسه عنصر نوشته می‌شود:

مثال

از CSS برای استایل دادن به عنصری با شناسه “myHeader” استفاده می‌کند:

<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>

<h1 id="myHeader">My Header</h1>

مشاهدهٔ نتیجه

ساخت نمونه مثال این بخش در دست اقدام است.

My Header

نکته: ویژگی id را می‌توان برای هر عنصر HTML استفاده می‌شود.

توجه: مقدار id case-sensitive (حساس به بزرگی و کوچکی حروف) است.

توجه: مقدار شناسه باید دارای حداقل یک کاراکتر باشد و نباید فاصله خالی داشته باشد (فاصله، تب و غیره).

تفاوت بین ID و 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>

<!-- A unique element -->
<h1 id="myHeader">My Cities</h1>

<!-- Multiple similar elements -->
<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>

مشاهدهٔ نتیجه

می‌توانید در مورد CSS در آموزش CSS ما بیشتر بیاموزید.

Bookmarkهایی (نشانک ها) با ID و لینک ها

نشانک‌های HTML این امکان را به خوانندگان می‌دهند که به بخش‌های خاصی از صفحه وب مراجعه کنند.

اگر صفحه وب شما بسیاز طولانی است نشانک‌ها می‌توانند کارآمد باشند.

برای ساختن یک نشانک، ابتدا باید یک نشانک ایجاد کنید و سپس یک لینک به آن اضافه کنید.

وقتی که روی لینک کلیک شود، صفحه به مکان نشانک می‌رود.

مثال

ابتدا یک bookmark با ویژگی id ایجاد کنید:

<h2 id="C4">Chapter 4</h2>

سپس، یک لینک به نشانک (“Jump to Chapter 4”) از همان صفحه فعلی ایجاد کنید:

<a href="#C4">Jump to Chapter 4</a>

یا از صفحه دیگری به نشانک (“Jump to Chapter4”) لینک بزنید:

مثال

<a href="html_demo.html#C4">Jump to Chapter 4</a>

مشاهدهٔ نتیجه

استفاده از ویژگی id در جاوا اسکریپت

جاوا اسکریپت می‌تواند با استفاده از متد getElementById() به عنصری با شناسه مشخص دسترسی داشته باشد:

مثال

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

<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>

مشاهدهٔ نتیجه

نکته: در مورد جاوا اسکریپت در بخش HTML JavaScript ما بیشتر خواهید آموخت یا می‌توانید آموزش JavaScript ما را مطالعه کنید.

تمرین های HTML

ساخت نمونه مثال این بخش در دست اقدام است.

---

« صفحهٔ قبل

صفحهٔ بعد »