خاصیت id در HTML

  /  فرانت اند   /  HTML   /  خاصیت id در HTML

خاصیت id در HTML یک شناسه منحصر به فرد برای عناصر تعریف می کند.

نکته: باید برای هر عنصر تنها یک ID منحصر به فرد تعریف کنید ، یعنی نمی توانید از یک ID همزمان در چند عنصر استفاده کنید.

از ID ها می توانیم برای دسترسی به عناصر HTML و ایجاد تغییراتی برروی آنها توسط JavaScript استفاده کنیم.

مثال

در مثال زیر یک ID برای تگ <h1> تحت عنوان myHeader تعریف کرده ایم که با استفاده از کد های JavaScript محتوای متنی درون این عنصر را تغییر می دهیم:

<!DOCTYPE HTML>
<html dir="rtl">
<body>

<h1 id="myHeader">سلام به همگی!</h1>
<button onclick="displayResult()">تغییر متن</button>

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

</body>
</html>


پشتیبانی مرورگر ها

خاصیت
idبلهبلهبلهبلهبله

نحوه استفاده

<element id="id">

مقادیر خاصیت

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

قوانین نامگذاری:

  • باید حداقل دارای یک کاراکتر باشد
  • نباید شامل هیچ گونه فاصله Space باشد

مثال های بیشتر

در مثال زیر با استفاده از شناسه ID عنصر رنگ آن را تغییر داده ایم:

<!DOCTYPE HTML>
<html>
<head>
<style>
#myHeader {
color: blue;
text-align: center;
}
</style>
</head>
<body>

<h1 id="myHeader">وب سایت آموزشی بابلز لرن</h1>

</body>
</html>


در مثال زیر یک لینک درست کرده ایم که کاربر با کلیک روی آن به ابتدای صفحه انتقال داده می شود:

<!DOCTYPE html>
<html dir="rtl">
<body>
<h2><a id="top">یک لینک برای جهش به بالای صفحه در انتهای این صفحه وجود دارد...</a></h2>
<p>
...
</p>
<a href="#top">برو بالا</a>
</body>
</html>

5/5 - (1 امتیاز)

برای دسترسی به آموزش های بیشتر و ویدیو های من ، کلمه کلیدی متین برونسی را داخل گوگل سرچ کنید.

ارسال یک نظر