آموزش خصوصیت id در HTML

با استفاده از خصوصیت id می توانیم برای یک عنصر HTML یک id یا شناسه یکتا تعریف کنیم(مقدار این خصوصیت باید در سند html یکتا باشد). از مقدار id می توانیم در CSS و جاوا اسکریپت برای انجام برخی کارها برای عنصر، با استفاده از مقدار آن انجام دهیم. در CSS برای انتخاب(گزینش) یک عنصر با استفاده از یک id خاص، ابتدا یک علامت # بنویسیم و پس از آن نام id عنصر مورد نظر را بنویسیم.

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

<h1 id="myHeader">عنوان من</h1>

نکته: برای هر عنصر HTML می توانیم یک خصوصیت id تعریف کنیم.

نکته: مقداری که در خصوصیت id قرار می گیرد به حروف بزرگ و کوچک حساس است.
نکته: مقدار خصوصیت id حداقل باید حاوی یک کاراکتر باشد و نباید حاوی فاصله سفید باشد(مانند space و tab).

تفاوت بین class و id

یک عنصر HTML تنها می تواند یک id که داشته باشد و این id مخصوص به خود اوست و عنصر دیگری در سند نباید id مشابهی با آن داشته باشد اما از یک class می تونایم برای چندین عنصر استفاده کنیم.

<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 خواهید آموخت.

بوک مارک ها و id و لینک ها

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

مثال

ابتدا یک بوک مارک  با خصوصیت id ایجاد کنید:

<h2 id="C4">فصل 4</h2>

سپس یک لینک را به بوک مارک در داخل همان صفحه اضافه کنید:

<a href="#C4">پرش به فصل 4</a>

 و یا اینکه یک لینک را به بوک مارک مورد نظر(پرش به فصل 4) از یک صفحه دیگر اضافه کنید:

<a href="/html_demo.html#C4">پرش به فصل 4</a>

استفاده از خصوصیت id در جاوا اسکریپت

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

<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "روز خوبی داشته باشید";
}
</script>