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

Порада:	Властивість `value` може бути корисною при серіалізації або десеріалізації стану `DOMTokenList`. Наприклад, при зберіганні класів елемента у локальному сховищі браузера можна зберігати `element.classList.value`, а потім відновлювати класи за допомогою `element.classList.value = savedValue`.
Порада:	Cлід бути обережним при встановленні `value`, оскільки це видалить всі існуючі токени у списку. Якщо потрібно додати або видалити окремі токени, краще використовувати методи `add()`, `remove()` або `toggle()`.
Порада:	При отриманні `value` слід пам'ятати, що результат повертається як рядок, де токени розділені пробілами. Якщо потрібен масив токенів, краще використовувати метод `values()` та перетворити ітератор на масив, наприклад: `Array.from(element.classList.values())`.

Синтаксис

DOMTokenList.value

Значення

Return

Переглядачі

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

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

Переглядач
	-	-

Приклади

Цей приклад демонструє, як можна взаємодіяти з різними елементами форми за допомогою властивості value. Користувач може ввести текст у поле, вибрати опцію з випадаючого списку та встановити або зняти чекбокс. Після натискання кнопки "Отримати значення" скрипт зчитує значення цих елементів і відображає їх на сторінці. Це показує, як можна легко отримувати та обробляти дані з елементів форми у JavaScript.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/ZENWVLK">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

У цьому прикладі ми використовуємо властивість value для динамічної зміни класів CSS на елементі на основі введеного користувачем рядка. Це може бути корисно для створення інтерфейсу для налаштування стилів елементів на льоту.

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

У цьому прикладі ми використовуємо властивість value для маніпулювання списком класів на основі певних умов або фільтрації. Це може бути корисно, якщо потрібно динамічно змінювати класи залежно від стану програми або введених даних.

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(' ');
  }
}

JS довідник

JavaScript

Наповнення JS розділу