Jeśli pracujemy z aplikacjami internetowymi, to zmiana klasy elementu jest czymś, co musimy często robić.

W tym artykule przyjrzymy się, jak zmienić klasę elementu za pomocą JavaScript.

Właściwość classList

Element ma classListwłaściwość, która pozwala nam manipulować klasami zastosowanymi do elementu.

Na przykład, jeśli mamy div:

<div>
  hello world
</div>

document.querySelector("div").classList.add('hello');

Jeśli helloklasa jest już dodana, nic nie zostanie zrobione.

Aby usunąć klasę, możemy wywołać classList.removemetodę:

document.querySelector("div").classList.remove('hello');

document.querySelector("div").classList.contains('hello');

Aby przełączyć klasę zastosowaną do elementu, możemy wywołać classList.togglemetodę:

document.querySelector("div").classList.toggle('hello');

W przeciwnym razie helloklasa zostanie dodana do elementu div.

Jest to dostępne w najnowszych przeglądarkach.

Właściwość className

Innym sposobem manipulowania klasami elementu jest manipulowanie classNamewłaściwością string.

Na przykład możemy napisać:

document.querySelector("div").className = 'hello';

Aby dodać klasę, manipulując classNamewłaściwością, możemy napisać:

document.querySelector("div").className += ' hello';

Aby usunąć helloklasę, możemy skorzystać z replacemetody:

document.querySelector("div").className.replace(/(?:^|\s)hello(?!\S)/g, '')

gFlaga będzie znaleźć wszystkie wystąpienia tego i zrobić wtórnik na wszystkie z nich.

Aby sprawdzić, czy klasa znajduje się w div, możemy napisać:

document.querySelector("div").className.match(/(?:^|\s)hello(?!\S)/)

Wniosek

Najlepszym i najłatwiejszym sposobem manipulowania klasami elementu HTML jest użycie classListwłaściwości.

Alternatywnie możemy również manipulować classNamewłaściwością string, aby zmienić classatrybut elementu.

Więcej treści na plainenglish.io