MohirDox

Ko'rinishi

HTML class atributi ​

HTML class atributi HTML elementiga klass belgilash uchun ishlatiladi.
Bir nechta HTML elementlar bir xil klassga ega bo'lishi mumkin.

class atributi ​

class atributi ko'pincha stil jadvalidagi klass nomiga ishora qilish uchun ishlatiladi. JavaScript orqali ham, ma'lum klass nomiga ega elementlarni topish va boshqarish mumkin.

Quyidagi misolda, uchta <div> elementi "shahar" klassiga ega. Barcha <div> elementlar bosh qismdagi .shahar stiliga muvofiq bir xil tarzda bezatiladi:

html
<!DOCTYPE html>
<html>
<head>
<style>
  .shahar {
    background-color: tomato;
    color: white;
    border: 2px solid black;
    margin: 20px;
    padding: 20px;
  }
</style>
</head>
<body>

<div class="shahar">
  <h2>London</h2>
  <p>London Angliyaning poytaxti.</p>
</div>

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

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

</body>
</html>

Quyidagi misolda, ikki <span> elementi "eslatma" klassiga ega. Ikkala <span> ham bosh qismdagi .eslatma stiliga muvofiq bezatiladi:

html
<!DOCTYPE html>
<html>
<head>
<style>
.eslatma {
  font-size: 120%;
  color: red;
}
</style>
</head>
<body>

<h1>Mening <span class="eslatma">Muhim</span> Sarlavham</h1>
<p>Bu <span class="eslatma">muhim</span> matn.</p>

</body>
</html>

TIP

class atributini istalgan HTML elementda ishlatish mumkin.

WARNING

Klass nomi katta-kichik harflarga sezgir!

TIP

CSS haqida ko'proq ma'lumotni CSS Darsligi sahifasida o'rganishingiz mumkin.

Klass sintaksisi ​

Klass yaratish uchun nuqta (.) belgisi va klass nomini yozing. So'ng, CSS xossalarini jingalak qavslar {} ichida belgilang:

"shahar" nomli klass yaratish:

html
<!DOCTYPE html>
<html>
<head>
<style>
.shahar {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>
</head>
<body>

<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>

</body>
</html>

Bir nechta klasslar ​

HTML element bir nechta klassga tegishli bo'lishi mumkin.

Bir nechta klasslarni belgilash uchun klass nomlarini bo'sh joy bilan ajrating, masalan: <div class="shahar asosiy">. Element ko'rsatilgan barcha klasslar bo'yicha bezatiladi.

Quyidagi misolda, birinchi <h2> elementi ham shahar klassiga, ham asosiy klassiga tegishli va har ikkala klassning CSS uslublarini oladi:

html
<h2 class="shahar asosiy">London</h2>
<h2 class="shahar">Parij</h2>
<h2 class="shahar">Tokio</h2>

Turli elementlar bir xil klassdan foydalanishi mumkin ​

Turli HTML elementlar bir xil klass nomiga ishora qilishi mumkin.

Quyidagi misolda, <h2> va <p> elementlari "shahar" klassiga ega va bir xil uslubga ega bo'ladi:

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

JavaScriptda class atributidan foydalanish ​

Klass nomi JavaScript orqali ham ma'lum elementlar uchun vazifalarni bajarishda ishlatiladi.

JavaScriptda ma'lum klass nomiga ega elementlarni getElementsByClassName() metodi orqali olish mumkin:

Tugmani bosganda "shahar" klassiga ega barcha elementlarni yashirish:

html
<script>
function meningFunksiyam() {
  var x = document.getElementsByClassName("shahar");
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
}
</script>

INFO

Yuqoridagi kodni tushunmasangiz, xavotir olmang.
Siz JavaScript haqida ko'proq HTML JavaScript bobida yoki JavaScript Darsligi sahifasida o'rganishingiz mumkin.

Bob yakuni ​

  • HTML class atributi element uchun bir yoki bir nechta klass nomini belgilaydi
  • Klasslar CSS va JavaScript orqali elementlarni tanlash va ularga murojaat qilish uchun ishlatiladi
  • class atributini istalgan HTML elementda ishlatish mumkin
  • Klass nomi katta-kichik harflarga sezgir
  • Turli HTML elementlar bir xil klass nomiga ishora qilishi mumkin
  • JavaScriptda ma'lum klass nomiga ega elementlarni getElementsByClassName() metodi orqali olish mumkin