شناسه ها (Id)
«شناسه (ID)» یک نام یکتای مخصوص هر عنصر است. با آن می توانیم دقیقاً همان عنصر را با CSS یا جاوااسکریپت هدف بگیریم. مهم است که هر id در صفحه منحصربه فرد باشد.
ویژگی id چیست؟
id باید یکتا باشد. سپس با سلکتور #idName در CSS استایل می دهیم. همین طور، در JS به همان عنصر دسترسی می گیریم.
<!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>
تفاوت کلاس و شناسه
«کلاس (Class)» را چند عنصر می گیرند؛ اما «شناسه (ID)» فقط برای یک عنصر است. پس، #myHeader یکتا است و .city مشترک است.
<style>
/* Element with unique id */
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
/* Elements sharing same class */
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
<h1 id="myHeader">My Cities</h1>
<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>
نشانه گذاری صفحه با شناسه (Bookmarks)
نشانه (Bookmark) کمک می کند سریع به بخش خاصی بپریم. اول، روی مقصد یک id بگذار.
<h2 id="C4">Chapter 4</h2>
بعد، یک لینک بساز تا به همان id برود. با #C4 مرورگر اسکرول می کند.
<a href="#C4">Jump to Chapter 4</a>
id در جاوااسکریپت (JavaScript)
با متد getElementById() عنصرِ یکتا را می گیریم. سپس متنش را عوض می کنیم.
<!DOCTYPE html>
<html>
<body>
<h1 id="myHeader">My Header</h1>
<button onclick="displayResult()">Change text</button>
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
<\/script>
</body>
</html>
سه گام تمرینی
- برای یک عنوان، id بساز و استایل بده.
- برای بخش های طولانی، نشانه #section بساز.
- با JS متن همان id را تغییر بده.
نکته: نام id حساس به حروف است. با عدد شروع نشود. فاصله هم نداشته باشد.
مسیر ادامه یادگیری
برای مقایسه با کلاس ها به صفحه کلاس ها (Classes) سر بزن. همچنین پرش داخل صفحه را در نشانه های لینک (Link Bookmarks) تمرین کن. و اگر لازم شد، شناسه در HTML را مرور کن.
جمع بندی سریع
- id باید یکتا باشد.
- در CSS با #idName هدف بگیر.
- در JS با getElementById بگیر.
- برای بوکمارک از id استفاده کن.