ویژگی id HTML

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

در یک مستند HTML نمی‌توان چندین عنصر با ID مشابه وجود داشته باشد.

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

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

id ویژگی‌ها برای اشاره به بیان‌های خاص استایل‌ها در جدول استایل‌ها استفاده می‌شود. جاوااسکریپت نیز می‌تواند از آن برای دسترسی و عمل بر روی عناصر دارای ID خاص استفاده کند.

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

در مثال زیر ما یک <h1> عنصر، که به نام id "myHeader" اشاره دارد. این <h1> عناصر بر اساس عنصر #myHeader تعریف استایل برای تنظیم استایل:

مثال

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

آزمایش کنید

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

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

تفاوت بین کلاس و id

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

مثال

<style>
/* تنظیم استایل برای عنصر با id "myHeader" */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
/* تنظیم استایل برای تمام عناصر با نام کلاس "city" */
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>
<!-- عناصر با id منحصر به فرد -->
<h1 id="myHeader">My Cities</h1>
<!-- عناصر متعدد با نام کلاس مشابه -->
<h2 class="city">لندن</h2>
<p>لندن پایتخت انگلستان است.</p>
<h2 class="city">پاریس</h2>
<p>پاریس پایتخت فرانسه است.</p>
<h2 class="city">توکیو</h2>
<p>توکیو پایتخت ژاپن است.</p>

آزمایش کنید

توضیح:لطفاً در آموزش CSS برای یادگیری بیشتر CSS به

نشانه‌گذاری‌های 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 در JavaScript

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

JavaScript می‌تواند از این ویژگی استفاده کند getElementById() راه‌حل برای دسترسی به عناصر دارای id خاص:

مثال

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

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

آزمایش کنید

توضیح:لطفاً در اسکریپت‌های JavaScript HTML در این فصل، یا در آموزش JavaScript در این فصل یاد بگیرید

خلاصه این فصل

  • id ویژگی‌ها برای تعیین id منحصر به فرد برای عناصر HTML استفاده می‌شوند
  • id ارزش ویژگی‌ها در مستند HTML باید منحصر به فرد باشد
  • CSS و JavaScript می‌توانند از این ویژگی‌ها استفاده کنند id ویژگی‌ها برای انتخاب عناصر یا تنظیم استایل برای عناصر خاص استفاده می‌شوند
  • id ارزش ویژگی‌ها بزرگ‌تر یا کوچک‌تر هستند
  • id این ویژگی‌ها همچنین می‌توانند برای ایجاد نشانه‌های HTML استفاده شوند
  • JavaScript می‌تواند از این ویژگی استفاده کند getElementById() راه‌حل برای دسترسی به عناصر دارای id خاص