ویژگی id
استفاده از ویژگی id[ویرایش | ویرایش]
ویژگی id یک شناسه منحصر بفرد برای یک عنصر HTML تعیین می‌کند (مقدار آن باید در سند HTML منحصر بفرد باشد).[۱]
مقدار id می‌تواند توسط css و جاوا اسکریپت برای انجام وظایف خاص برای عنصری با مقدار id خاص استفاده شود.
در CSS برای انتخاب یک id خاص، کاراکتر شارپ # به همراه شناسه عنصر نوشته می‌شود:
مثال[ویرایش | ویرایش]
از CSS برای استایل دادن به عنصری با شناسه “myHeader” استفاده می‌کند:
1 <style>
2 #myHeader {
3 background-color: lightblue;
4 color: black;
5 padding: 40px;
6 text-align: center;
7 }
8 </style>
9
10 <h1 id="myHeader">My Header</h1>
40px ساخت نمونه مثال این بخش در دست اقدام است.
My Header[ویرایش | ویرایش]
نکته: ویژگی id را می‌توان برای هر عنصر HTML استفاده می‌شود.
توجه: مقدار id case-sensitive (حساس به بزرگی و کوچکی حروف) است.
توجه: مقدار شناسه باید دارای حداقل یک کاراکتر باشد و نباید فاصله خالی داشته باشد (فاصله، تب و غیره).
تفاوت بین ID و Class[ویرایش | ویرایش]
یک عنصر HTML می‌تواند فقط یک id یکتا داشته باشد که متعلق به یک عنصر واحد است، درحالیکه نام کلاس را می‌توان برای چند عنصر استفاده کرد:
مثال[ویرایش | ویرایش]
1 <style>
2 /* Style the element with the id "myHeader" */
3 #myHeader {
4 background-color: lightblue;
5 color: black;
6 padding: 40px;
7 text-align: center;
8 }
9
10 /* Style all elements with the class name "city" */
11 .city {
12 background-color: tomato;
13 color: white;
14 padding: 10px;
15 }
16 </style>
17
18 <!-- A unique element -->
19 <h1 id="myHeader">My Cities</h1>
20
21 <!-- Multiple similar elements -->
22 <h2 class="city">London</h2>
23 <p>London is the capital of England.</p>
24
25 <h2 class="city">Paris</h2>
26 <p>Paris is the capital of France.</p>
27
28 <h2 class="city">Tokyo</h2>
29 <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 برای دستکاری متن با جاوا اسکریپت استفاده کنید:
1 <script>
2 function displayResult() {
3 document.getElementById("myHeader").innerHTML = "Have a nice day!";
4 }
5 </script>
تمرین های HTML[ویرایش | ویرایش]
40px ساخت نمونه مثال این بخش در دست اقدام است.
منابع آموزشی[ویرایش | ویرایش]