ویژگی id

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
(تغییرمسیر از آی دی در HTML)
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Html-menu.png
موارد آموزشی
۱خانه
۲مقدمه
۳ویرایشگرها
۴پایه
۵عنصرها
۶ویژگی‌ها
۷عنوان‌ها
۸پاراگراف‌ها
۹استایل‌ها
۱۰قالب‌بندی
۱۱نقل‌قول‌ها
۱۲توضیحات
۱۳رنگ‌ها
۱۴CSS
۱۵لینک‌ها
۱۶تصاویر
۱۷جداول
۱۸لیست‌ها
۱۹بلوک‌ها
۲۰کلاس‌ها
۲۱شناسه
۲۲Iframeها
۲۳جاوا اسکریپت
۲۴مسیرهای فایل
۲۵سرصفحه
۲۶چیدمان‌ها
۲۷واکنش‌گرا
۲۸کد کامپیوتری
۲۹معنایی‌ها
۳۰راهنمای استایل
۳۱موجودیت‌ها
۳۲نماد‌ها
۳۳ایموجی‌ها
۳۴مجموعه کاراکترها
۳۵رمزگذاری URL
۳۶HTML و XHTML
فرم‌های HTML
گرافیک در HTML
رسانه در HTML
APIها در HTML
مثال‌ها
مرجع HTML

استفاده از ویژگی 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>


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

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


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 JavaScript ما بیشتر خواهید آموخت یا می‌توانید آموزش JavaScript ما را مطالعه کنید.

تمرین های HTML

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



منابع آموزشی