class
Misol
HTML hujjatida class atributidan foydalanish:
<html>
<head>
<style>
h1.intro {
color: blue;
}
p.important {
color: green;
}
</style>
</head>
<body>
<h1 class="intro">Header 1</h1>
<p>A paragraph.</p>
<p class="important">Note that this is an important paragraph. :)</p>
</body>
</html>
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
class atributi element uchun bir yoki bir nechta sinf (class) nomini belgilaydi.
class atributi asosan uslublar jadvalidagi klassga ishora qilish uchun ishlatiladi. Biroq undan JavaScript ham (HTML DOM orqali) belgilangan klassga ega HTML elementlariga o‘zgartirishlar kiritish uchun foydalanishi mumkin.
Brauzerlarda qo‘llab-quvvatlash
| Atribut | |||||
|---|---|---|---|---|---|
| class | Ha | Ha | Ha | Ha | Ha |
Sintaksis
<element class="classname">
Atribut qiymatlari
| Qiymat | Tavsif |
|---|---|
| classname | Element uchun bir yoki bir nechta sinf nomini belgilaydi. Bir nechta sinfni ko‘rsatish uchun sinf nomlarini bo‘sh joy bilan ajrating, masalan, <span class="left important">. Bu bitta HTML elementi uchun bir nechta CSS sinflarini birlashtirish imkonini beradi. Nomlash qoidalari:
|
Ko‘proq misollar
Misol
Bitta HTML elementiga bir nechta sinf qo‘shing:
<!DOCTYPE html>
<html>
<head>
<style>
h1.intro {
color: blue;
text-align: center;
}
.important {
background-color: yellow;
}
</style>
</head>
<body>
<h1 class="intro important">Header 1</h1>
<p>A paragraph.</p>
</body>
</html>
O‘zingiz sinab ko‘ring »
Misol
JavaScript yordamida class="example" bo‘lgan birinchi elementga (indeks 0) sariq fon rangini qo‘shish.
let x = document.getElementsByClassName("example");
x[0].style.backgroundColor = "yellow";
O‘zingiz sinab ko‘ring »
Misol
JavaScript yordamida id="myDIV" bo‘lgan elementga "mystyle" sinfini qo‘shish:
document.getElementById("myDIV").classList.add("mystyle");
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
HTML darsligi: HTML atributlari
CSS darsligi: CSS sintaksisi
CSS ma’lumotnomasi: CSS .class selektori
HTML DOM ma’lumotnomasi: HTML DOM getElementsByClassName() metodi
HTML DOM ma’lumotnomasi: HTML DOM className xususiyati
HTML DOM ma’lumotnomasi: HTML DOM classList xususiyati
HTML DOM ma’lumotnomasi: HTML DOM Style obyekti
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!