Усули toggle объекти classList

Усули toggle объекти classList алтернативи CSS-класси муайянкардаи элементро иҷро мекунад: классро илова мекунад, агар он вуҷуд надошта бошад ва ҳазф мекунад, агар мавҷуд бошад.

Синтаксис

javascriptelement.classList.contains(class);

Намуна

Дар ин намуна, вақте ки усули toggle истифода мешавад, класс zzz ҳазф мешавад, зеро он аллакай дар элемент мавҷуд аст:

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

Натиҷаи иҷрои код:

html<p id="elem" class="www ggg"></p>

Намуна

Дар ин намуна, вақте ки усули toggle истифода мешавад, класс zzz илова мешавад, зеро он дар элемент вуҷуд надорад:

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

Натиҷаи иҷрои код:

html<p id="elem" class="www ggg zzz"></p>

Ҳамчунин бубинед

  • усули classList.add,
    ки класси муайянкардаро илова мекунад
  • усули classList.remove,
    ки класси муайянкардаро ҳазф мекунад
  • усули classList.contains,
    ки класси муайянкардаро тафтиш мекунад