ویژگی id

Main Page Tutorial
موارد آموزشی
۱	خانه
۲	مقدمه
۳	ویرایشگرها
۴	پایه
۵	عنصرها
۶	ویژگی‌ها
۷	عنوان‌ها
۸	پاراگراف‌ها
۹	استایل‌ها
۱۰	قالب‌بندی
۱۱	نقل‌قول‌ها
۱۲	توضیحات
۱۳	رنگ‌ها RGB HEX HSL
۱۴	CSS
۱۵	لینک‌ها رنگ‌های لینک نشانک‌های لینک
۱۶	تصاویر نقشه‌های تصویری تصاویر پس‌زمینه عنصر Picture
۱۷	جداول
۱۸	لیست‌ها لیست نامرتب لیست مرتب لیست‌های دیگر
۱۹	بلوک‌ها
۲۰	کلاس‌ها
۲۱	شناسه
۲۲	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>

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

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

تمرین های HTML

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

صفحهٔ بعد»

«صفحهٔ قبل