classList хусусияти

classList хусусияти элементнинг CSS классларининг псевдомассивини ўз ичига олади, шунингдек, элементнинг классларини ку́шиш ва ўчириш, элементнинг класслари орасида маълум бир класснинг мавжудлигини текшириш имконини беради.

Бу class атрибути хакида гап бу́либ, унинг ичига бир нечта классларни бошли́к билан ёзиш мумкин, масалан www ggg zzz. classList ёрдамида, масалан, ggg classini ўчириш мумкин, колган классларга тегмасдан.

Синтаксис

javascriptэлемент.classList;

Мисол . Класслар сони

Элементнинг класслар сонини аниклаймиз:

html<p id="elem" class="www ggg zzz"></p>
javascriptlet elem = document.querySelector('#elem');

let length = elem.classList.length;
console.log(length);

Кодни ишга тушириш натижаси:

javascript3

Мисол . Классларни айлантирамиз

Элементнинг классларини навбат билан чикарамиз:

html<p id="elem" class="www ggg zzz"></p>
javascriptlet elem = document.querySelector('#elem');
let classNames = elem.classList;

for (let className of classNames) {
  console.log(className);
}

Кодни ишга тушириш натижаси:

javascript'www'
'ggg'
'zzz'

Шунингдек ку́шинг

  • classList.add методи,
    берilган классни ку́шади
  • classList.remove методи,
    берilган классни ўчиради
  • classList.contains методи,
    берilган классни текширади
  • classList.toggle методи,
    берilган классни алмаштиради