100% کامل شده تا

ویژگی id در اچ‌تی‌ام‌ال (HTML id Attribute)

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
< HTML:Tutorial(تغییرمسیر از Id در HTML)
پرش به ناوبری پرش به جستجو


ویژگی id در HTML برای تعیین یک شناسهٔ منحصر به فرد، برای یک عنصر HTML استفاده می‌شود.[۱]

شما نمی‌توانید بیش از یک عنصر با شناسهٔ یکسان در یک سند HTML داشته باشید.


استفاده از ویژگی id

ویژگی id یک شناسهٔ منحصر بفرد برای یک عنصر HTML تعیین می‌کند (مقدار آن باید در سند HTML منحصر بفرد باشد).

ویژگی id برای اشاره به یک اعلامیه سبک خاص در یک برگهٔ استایل استفاده می‌شود. همچنین توسط جاوااسکریپت، برای دستکاری و دسترسی عنصر با شناسهٔ خاص استفاده می‌شود.

شیوهٔ نگارش id اینگونه است: یک کاراکتر hash (#) بنویسید، و پس از آن یک نام id. سپس، ویژگی‌های CSS را در داخل براکت‌ها { } تعریف کنید.

در مثال زیر ما یک عنصر <h1> داریم که به id با نام "myHeader" اشاره می‌کند. این عنصر <h1> مطابق تعریف استایل داده شده #myHeader در قسمت head استایل داده می‌شود:

مثال

<!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>

Responsive demo.svg


توجه: نام شناسه به حروف بزرگ حساس است!

توجه: نام شناسه باید حداقل دارای یک نویسه باشد، نمی‌تواند با یک عدد شروع شود و نباید دارای فضاهای سفید (فاصله‌ها، تب‌ها و غیره) باشد.



تفاوت بین ID و Class

یک نام کلاس می‌تواند توسط چندین عنصر HTML استفاده شود، در حالی که یک نام شناسهٔ یکتا، فقط باید توسط یک عنصر HTML در صفحه استفاده شود:

مثال

<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>

<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>

مثال

/* 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;
}

مثال

<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>

<h2>Difference Between Class and ID</h2>
<p>A class name can be used by multiple HTML elements, while an id name must only be used by one HTML element within the page:</p>

<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>

</body>
</html>

Responsive demo.svg


نکته: می‌توانید در مورد سی‌اس‌اس در آموزش CSS ما بیشتر مطالعه کنید.




Bookmarkهایی (نشانک ها) با ID و لینک ها

نشانک‌های HTML این امکان را به خوانندگان می‌دهند که به بخش‌های خاصی از صفحه وب مراجعه کنند.

اگر صفحه وب شما بسیاز طولانی است نشانک‌ها می‌توانند کارآمد باشند.

برای ساختن یک نشانک، ابتدا باید یک نشانک ایجاد کنید و سپس یک پیوند به آن اضافه کنید.

سپس، وقتی روی پیوند کلیک می‌شود، صفحه به مکان نشانک مورد نظر حرکت می‌کند.

ابتدا یک bookmark با ویژگی id ایجاد کنید:

<h2 id="C4">Chapter 4</h2>


سپس، یک لینک به نشانک (“Jump to Chapter 4”) از همان صفحه فعلی ایجاد کنید:

مثال

<a href="#C4">Jump to Chapter 4</a>

مثال

<!DOCTYPE html>
<html>
<body>

<p><a href="#C4">Jump to Chapter 4</a></p>
<p><a href="#C10">Jump to Chapter 10</a></p>

<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>

<h2 id="C4">Chapter 4</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>

<h2 id="C10">Chapter 10</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 18</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 19</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 20</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 21</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 22</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 23</h2>
<p>This chapter explains ba bla bla</p>

</body>
</html>

Responsive demo.svg


یا از صفحه دیگری به نشانک (“Jump to Chapter4”) لینک بزنید:

<a href="html_demo.html#C4">Jump to Chapter 4</a>


استفاده از ویژگی id در جاوا اسکریپت

ویژگی id همچنین می‌تواند توسط JavaScript برای انجام برخی وظایف برای آن عنصر خاص استفاده شود.

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

مثال

از ویژگی id برای دستکاری متن با جاوااسکریپت استفاده کنید:

<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>

مثال

<!DOCTYPE html>
<html>
<body>

<h2>Using The id Attribute in JavaScript</h2>
<p>JavaScript can access an element with a specified id by using the getElementById() method:</p>

<h1 id="myHeader">Hello World!</h1>
<button onclick="displayResult()">Change text</button>

<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>

</body>
</html>

Responsive demo.svg


نکته: در مورد جاوااسکریپت در بخش جاوا اسکریپت در HTML ما بیشتر خواهید آموخت یا می‌توانید آموزش JavaScript ما را مطالعه کنید.


خلاصهٔ بخش

ویژگی id برای تعیین یک شناسهٔ منحصر به فرد برای یک عنصر HTML استفاده می‌شود
مقدار ویژگی id باید در سند HTML منحصر به فرد باشد
ویژگی id توسط CSS و JavaScript برای استایل دهی/انتخاب یک عنصر خاص استفاده می‌شود
مقدار ویژگی id به حروف بزرگ و کوچک حساس است
ویژگی id همچنین برای ایجاد HTML (به فارسی: نشانک) bookmarks استفاده می‌شود
جاوااسکریپت می‌تواند با متد getElementById() به عنصری با شناسهٔ خاص دسترسی پیدا کند

منابع آموزشی




به‌روزرسانی شده: ۵ روز پیش