ویژگی id HTML

ایچ تی ایم ایل id نمائش کا استعمال کیا جاتا ہے تاکہ ایچ تی ایم ایل عناصر کو یونک آئیڈ مقرر کیا جاسکے。

ایک ایچ تی ایم ایل ڈاکومن میں کسی بھی عناصر کا id نہیں دو ہو سکتا جو ایک سے زیادہ ہو。

نمائش کا استعمال کریں

id نمائش کا استعمال کیا جاتا ہے تاکہ HTML عناصر کا یونک آئیڈ کا تعریف کیا جاسکے。 id نمائش کا مطلب کا استعمال کیا جاتا ہے تاکہ HTML ڈاکومن میں اس کا استعمال کیا جاسکے اور اس کا مطلب یونک ہونا چاہئے。

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 و غیره) باشد.

اختلاف بین Class و 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 بهتر است در

نقش‌نما‌های HTML از طریق ID و لینک اجرا می‌شوند

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

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

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

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

مثال

ابتدا، با}} id ویژگی نقاشی ایجاد می‌کند:

<h2 id="C4">فصل چهارم</h2>

سپس، در یک صفحه مشابه، لینک به این نقاشی را اضافه کنید ("به فصل چهارم بپردازید"):

مثال

<a href="#C4">به فصل چهارم بپردازید</a>

آزمایش کنید

یا، در یک صفحه دیگر، لینک به این نقاشی را اضافه کنید ("به فصل چهارم بپردازید"):

<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 در اینجا JavaScript یاد بگیرید.

این فصل را جمع‌بندی می‌کنیم

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