HTML id atributi
HTML id atributi HTML elementi uchun
noyob id belgilashda ishlatiladi.
HTML hujjatida bir xil id ga ega bittadan ko‘p element bo‘lishi mumkin emas.
id atributi
id atributi HTML elementi uchun noyob id belgilaydi.
id atributining qiymati HTML hujjati ichida noyob bo‘lishi shart.
id atributi uslublar jadvalidagi muayyan uslub deklaratsiyasiga ishora qilishda ishlatiladi. U, shuningdek, JavaScript tomonidan muayyan id ga ega elementga kirish va uni boshqarishda ham ishlatiladi.
Id sintaksisi quyidagicha: # belgisini yozib, undan keyin id nomini yozing. So‘ngra, qavslar {} ichida CSS xususiyatlarini belgilang.
Quyidagi misolda "myHeader" id nomiga ishora qiluvchi <h1> elementimiz bor. Bu <h1>
element head bo‘limidagi #myHeader
uslub ta’rifiga muvofiq uslublanadi:
Misol
<!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>
O‘zingiz sinab ko‘ring »
Eslatma: id nomida katta va kichik harflar farqlanadi!
Eslatma: id nomi kamida bitta belgidan iborat bo‘lishi, raqam bilan boshlanmasligi va bo‘shliq belgilarini (probel, tabulyatsiya va hokazo) o‘z ichiga olmasligi kerak.
class va id o‘rtasidagi farq
Sinf (class) nomidan bir nechta HTML elementlari ishlatishi mumkin, id nomi esa sahifa ichida faqat bitta HTML elementi tomonidan ishlatilishi kerak:
Misol
<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>
O‘zingiz sinab ko‘ring »
Maslahat: CSS haqida CSS darsligimizda ancha batafsil o‘rganishingiz mumkin.
ID va havolalar yordamida HTML xatcho‘plari yaratish
HTML xatchuplari (bookmarks) o‘quvchilarga veb-sahifaning muayyan qismlariga o‘tish imkonini berish uchun ishlatiladi.
Agar sahifangiz juda uzun bo‘lsa, xatchuplar foydali bo‘lishi mumkin.
Xatchupdan foydalanish uchun avval uni yarating, so‘ngra unga havola qo‘shing.
So‘ngra, havola bosilganda, sahifa xatchup joylashgan joyga aylantiriladi (scroll qilinadi).
Misol
Avval, id atributi bilan xatchup yarating:
<h2 id="C4">Chapter 4</h2>
So‘ngra, xuddi shu sahifa ichidan xatchupga havola qo‘shing ("4-bobga o‘tish"):
Yoki boshqa sahifadan xatchupga havola qo‘shing ("4-bobga o‘tish"):
<a href="html_demo.html#C4">Jump to Chapter 4</a>
JavaScript da id atributidan foydalanish
id atributidan JavaScript tomonidan muayyan element uchun ba’zi vazifalarni bajarishda ham foydalanish mumkin.
JavaScript getElementById() metodi bilan muayyan id ga ega elementga kira oladi:
Misol
JavaScript bilan matnni boshqarish uchun id atributidan foydalaning:
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
O‘zingiz sinab ko‘ring »
Maslahat: JavaScriptni HTML JavaScript bobida yoki JavaScript darsligimizda o‘rganing.
Bob xulosasi
idatributi HTML elementi uchun noyobidbelgilashda ishlatiladiidatributining qiymati HTML hujjati ichida noyob bo‘lishi shartidatributi CSS va JavaScript tomonidan muayyan elementni uslublash/tanlashda ishlatiladiidatributining qiymati katta-kichik harflarga sezgiridatributi HTML xatchuplarni yaratishda ham ishlatiladi- JavaScript
getElementById()metodi bilan muayyan id ga ega elementga kira oladi
Video: HTML id atributi
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!