JS властивість DOMTokenList.value

На даний момент опис відсутній.

Порада

Cлід бути обережним при встановленні value, оскільки це видалить всі існуючі токени у списку. Якщо потрібно додати або видалити окремі токени, краще використовувати методи add(), remove() або toggle().

автор: Bond правити

Порада

При отриманні value слід пам'ятати, що результат повертається як рядок, де токени розділені пробілами. Якщо потрібен масив токенів, краще використовувати метод values() та перетворити ітератор на масив, наприклад: Array.from(element.classList.values()).

автор: Bond правити

Порада

Властивість value може бути корисною при серіалізації або десеріалізації стану DOMTokenList. Наприклад, при зберіганні класів елемента у локальному сховищі браузера можна зберігати element.classList.value, а потім відновлювати класи за допомогою element.classList.value = savedValue.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

DOMTokenList.value

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	50	47	10	37	17	—

Підтримка: мобільні переглядачі

Переглядач
	50	50	47	10

Приклади

+ запропонувати свій приклад у пісочниці

<div class="my-element">перший елемент my-element</div>
<div class="my-element">другий елемент my-element</div>

const element = document.querySelector('.my-element');

// Функція для видалення класів, що починаються з "old-"
function removeOldClasses() {
  const currentClasses = element.classList.value.split(' ');
  const updatedClasses = currentClasses.filter(className => !className.startsWith('old-'));
  element.classList.value = updatedClasses.join(' ');
}

// Функція для додавання класу "active", якщо елемент не має його
function toggleActiveClass() {
  const currentClasses = element.classList.value.split(' ');
  if (!currentClasses.includes('active')) {
    element.classList.value = [...currentClasses, 'active'].join(' ');
  }
}

<input type="text" id="class-input" value="текст для прикладу" placeholder="Введи щось">
<div id="update-classes">Демонстраційний елемент</div>
<div class="my-element">перший елемент my-element</div>
<div class="my-element">другий елемент my-element</div>

const element = document.querySelector('.my-element');
const classInput = document.getElementById('class-input');
const updateButton = document.getElementById('update-classes');

// Функція для оновлення класів елемента
function updateClasses() {
  const newClasses = classInput.value.trim().split(' ');
  element.classList.value = newClasses.join(' ');
}

// Обробник події для кнопки "Оновити класи"
updateButton.addEventListener('click', updateClasses);