MohirDox

Ko'rinishi

HTML id atributi ​

HTML id atributi HTML elementiga yagona, noyob id qiymatini belgilash uchun ishlatiladi.

Eslatma: HTML hujjatida bir xil id qiymatiga ega bir nechta element bo'lishi mumkin emas.

id atributi ​

id atributi HTML elementiga noyob id qiymatini belgilaydi. id atributining qiymati HTML hujjatida yagona bo'lishi shart.

id atributi CSS faylida maxsus uslubni belgilash uchun ishlatiladi. Shuningdek, JavaScript orqali id qiymati bo'yicha elementga murojaat qilish va uni boshqarish mumkin.

Id sintaksisi: xesh belgisi (#), so'ng id nomi yoziladi. Keyin, CSS xossalari jingalak qavslar {} ichida belgilanadi.

Quyidagi misolda <h1> elementi "meningSarlavham" id nomiga ega. Bu <h1> elementi head bo'limidagi #meningSarlavham uslubiga muvofiq bezatiladi:

html
<!DOCTYPE html>
<html>
<head>
<style>
#meningSarlavham {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>
</head>
<body>

<h1 id="meningSarlavham">Mening Sarlavham</h1>

</body>
</html>

Eslatma: Id nomi katta-kichik harflarga sezgir!
Eslatma: Id nomi kamida bitta belgidan iborat bo'lishi kerak, raqam bilan boshlanmasligi va bo'sh joy (probel, tab va h.k.) bo'lmasligi lozim.

Class va ID o'rtasidagi farq ​

Class nomi bir nechta HTML elementlarida ishlatilishi mumkin, id nomi esa faqat bitta HTML elementda bo'lishi kerak:

html
<style>
/* "meningSarlavham" idga ega elementni uslublash */
#meningSarlavham {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}

/* "shahar" classiga ega barcha elementlarni uslublash */
.shahar {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>

<!-- Yagona idga ega element -->
<h1 id="meningSarlavham">Mening Shaharlarim</h1>

<!-- Bir xil classga ega bir nechta elementlar -->
<h2 class="shahar">London</h2>
<p>London Angliyaning poytaxti.</p>

<h2 class="shahar">Parij</h2>
<p>Parij Fransiyaning poytaxti.</p>

<h2 class="shahar">Tokio</h2>
<p>Tokio Yaponiyaning poytaxti.</p>

Maslahat: CSS haqida batafsil CSS Darsligi sahifasida o'qishingiz mumkin.

HTML Bookmarks: ID va Havolalar ​

HTML bookmarks (xatcho'plar) sahifadagi muayyan joyga tez o'tish uchun ishlatiladi. Agar sahifa uzun bo'lsa, xatcho'plar foydali bo'ladi.

Bookmarkdan foydalanish uchun avval uni yaratish, so'ng unga havola qo'shish kerak. Havola bosilganda, sahifa bookmark joyiga o'tadi.

Avval, id atributi bilan bookmark yarating:

html
<h2 id="B4">4-bob</h2>

Keyin, sahifa ichida bookmarkga havola qo'shing ("4-bobga o'tish"):

html
<a href="#B4">4-bobga o'tish</a>

Yoki, boshqa sahifadan bookmarkga havola qo'shing:

html
<a href="html_demo.html#B4">4-bobga o'tish</a>

JavaScriptda id atributidan foydalanish ​

id atributi JavaScript orqali ham muayyan elementga murojaat qilish uchun ishlatiladi.

JavaScriptda id qiymati bo'yicha elementga getElementById() metodi yordamida murojaat qilinadi:

html
<script>
function natijaniKorsat() {
  document.getElementById("meningSarlavham").innerHTML = "Yaxshi kun tilayman!";
}
</script>

Maslahat: JavaScript haqida HTML JavaScript bobida yoki JavaScript Darsligi sahifasida o'rganishingiz mumkin.

Bob yakuni ​

  • id atributi HTML elementiga noyob id qiymatini belgilash uchun ishlatiladi.
  • id atributining qiymati HTML hujjatida yagona bo'lishi shart.
  • id atributi CSS va JavaScript orqali muayyan elementni uslublash/tanlash uchun ishlatiladi.
  • id qiymati katta-kichik harflarga sezgir.
  • id atributi HTML xatcho'plarini yaratishda ham ishlatiladi.
  • JavaScriptda id qiymati bo'yicha elementga getElementById() metodi yordamida murojaat qilinadi.