HTML class atributi
HTML class atributi HTML elementi uchun
klassni belgilash uchun ishlatiladi.
Bir nechta HTML elementlari bir xil klassni baham ko‘rishi mumkin.
class atributi
class atributi ko‘pincha uslublar jadvalidagi klass nomiga ishora qilish uchun ishlatiladi. Undan JavaScript ham muayyan klass nomiga ega elementlarga kirish va ularni boshqarish uchun foydalanishi mumkin.
Quyidagi misolda bizning uchta <div> elementimiz bor,
ularning class atributi "city"
qiymatiga ega. Uchala <div>
elementi ham head bo‘limidagi .city
uslub ta’rifiga muvofiq bir xil uslubda ko‘rsatiladi:
Misol
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
</html>
O‘zingiz sinab ko‘ring »
Quyidagi misolda bizning ikkita <span> elementimiz bor,
ularning class atributi "note"
qiymatiga ega. Ikkala <span>
elementi ham head bo‘limidagi .note
uslub ta’rifiga muvofiq bir xil uslubda ko‘rsatiladi:
Misol
<!DOCTYPE html>
<html>
<head>
<style>
.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>
</body>
</html>
O‘zingiz sinab ko‘ring »
Maslahat: class atributini istalgan HTML elementida ishlatish mumkin.
Eslatma: class nomida katta va kichik harflar farqlanadi!
Maslahat: CSS haqida CSS darsligimizda ancha batafsil o‘rganishingiz mumkin.
Klass sintaksisi
Klass yaratish uchun nuqta (.) belgisini yozing, so‘ngra klass nomini yozing. So‘ngra, qavslar {} ichida CSS xususiyatlarini belgilang:
Misol
"city" nomli klass yarating:
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<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>
</body>
</html>
O‘zingiz sinab ko‘ring »
Bir nechta klass
HTML elementlari bir nechta klassga tegishli bo‘lishi mumkin.
Bir nechta klassni belgilash uchun klass nomlarini bo‘sh joy bilan ajrating, masalan: <div class="city main">. Element ko‘rsatilgan barcha klasslarga muvofiq uslublanadi.
Quyidagi misolda birinchi <h2> elementi city klassiga ham, main klassiga ham tegishli bo‘lib, ikkala klassning CSS uslublarini oladi:
Misol
<h2
class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2
class="city">Tokyo</h2>
O‘zingiz sinab ko‘ring »
Turli elementlar bir xil klassga ega bo‘lishi mumkin
Turli HTML elementlari bir xil klass nomiga ishora qilishi mumkin.
Quyidagi misolda <h2> va <p>
ikkalasi ham "city" klassiga ishora qiladi
va bir xil uslubni baham ko‘radi:
Misol
<h2 class="city">Paris</h2>
<p
class="city">Paris is the capital of France</p>
O‘zingiz sinab ko‘ring »
JavaScript da class atributidan foydalanish
Klass nomidan JavaScript ham muayyan elementlar uchun ba’zi vazifalarni bajarishda foydalanishi mumkin.
JavaScript getElementsByClassName() metodi yordamida muayyan klass nomiga ega elementlarga kira oladi:
Misol
Tugmani bosib "city" klass nomiga ega barcha elementlarni yashiring:
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length;
i++) {
x[i].style.display = "none";
}
}
</script>
O‘zingiz sinab ko‘ring »
Agar yuqoridagi misoldagi kodni tushunmasangiz, xavotir olmang.
JavaScript haqida bizning HTML JavaScript bobimizda ko‘proq o‘rganasiz yoki JavaScript darsligimizni o‘rganishingiz mumkin.
Bob xulosasi
- HTML
classatributi element uchun bitta yoki bir nechta klass nomini belgilaydi - Klasslardan CSS va JavaScript tomonidan muayyan elementlarni tanlash va ularga kirish uchun foydalaniladi
classatributi istalgan HTML elementida ishlatilishi mumkin- Klass nomi katta-kichik harflarga sezgir
- Turli HTML elementlari bir xil klass nomiga ishora qilishi mumkin
- JavaScript
getElementsByClassName()metodi yordamida muayyan klass nomiga ega elementlarga kira oladi
Video: HTML class atributi
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!