صفت id در HTML

از ویژگی id در HTML برای تعیین شناسه منحصر به فرد برای یک عنصر HTML استفاده می شود.

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

 

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

ویژگی id یک شناسه منحصر به فرد برای یک عنصر HTML مشخص می کند. مقدار ویژگی id باید در سند HTML منحصر به فرد باشد.

از ویژگی id برای اشاره به یک اعلامیه سبک خاص در یک صفحه سبک استفاده می شود. همچنین توسط JavaScript برای دستیابی و دستکاری عنصر با شناسه خاص استفاده می شود.

نحو 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">سرتیتر من</h1>

</body>
</html>
امتحان کنید

 

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

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

 

تفاوت بین class و id

نام class توسط چندین عنصر HTML قابل استفاده است، در حالی که نام id فقط باید توسط یک عنصر 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>

<!-- An element with a unique id -->
<h1 id="myHeader">شهر های من</h1>

<!-- Multiple elements with same class -->
<h2 class="city">لندن</h2>
<p>لندن پایتخت انگلستان است</p>

<h2 class="city">پاریس</h2>
<p>پاریس پایتخت فرانسه است</p>

<h2 class="city">تهران</h2>
<p>تهران پایتخت ایران است</p>
امتحان کنید

 

نشانک های HTML با id و لینک ها

نشانک های HTML برای اجازه دادن به خوانندگان برای پرش به قسمت های خاص یک صفحه وب استفاده می شوند.

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

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

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

 

مثال:

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

<h2 id="C4">فصل 4</h2>

 

سپس ، از داخل همان صفحه ، پیوندی را به نشانک ("رفتن به فصل 4") اضافه کنید:

<a href="#C4">رفتن به فصل 4</a>
امتحان کنید

 

یا از صفحه دیگر پیوندی را به نشانک ("رفتن به فصل 4") اضافه کنید:

<a href="html_demo.html#C4">رفتن به فصل 4</a>

 

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

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

JavaScript می تواند با یک متد () getElementById به یک عنصر با شناسه خاص دسترسی پیدا کند:

 

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

<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "روز خوبی داشته باشید";
}
</script>
امتحان کنید