٪۴۰ تخفیف تابستانه شروع شد! بزرگترین حراج سال ما

به ما بپیوندید

آموزش ویژگی HTML id

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

محمد یوسفی

28 ژوئن 2021

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

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


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

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

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

نحو ID این است: یک کاراکتر هش (#) بنویسید و به دنبال آن یک نام شناسه دنبال کنید. سپس ، خصوصیات CSS را در پرانتزها تعریف کنید {}.

در مثال زیر <h1>عنصری داریم که به شناسه “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>

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

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


تفاوت بین کلاس و شناسه

نام کلاس توسط چندین عنصر 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>

<!-- An element with a unique id -->
<h1 id="myHeader">My Cities</h1>

<!-- Multiple elements with same class -->
<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>

نشانک های HTML با شناسه و پیوندها

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

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

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

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

مثال

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

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

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

مثال

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

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

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

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

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

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

مثال

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

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

منبع

مطالب مرتبط

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها