JS метод DOMTokenList.supports()
Загальний опис
supports() є методом, який перевіряє, чи підтримує дана реалізація конкретний токен. Цей метод використовується для визначення можливостей класів об'єктів, що реалізують інтерфейс DOMTokenList, який забезпечує впорядкований набір токенів, наприклад, для керування класами CSS елементів.
Метод supports() приймає один аргумент - рядок, що представляє токен, наявність підтримки якого потрібно перевірити. Метод повертає логічне значення true, якщо токен підтримується, і false - якщо ні. Це дозволяє додаткам визначати, чи можна використовувати певні токени у конкретній реалізації DOMTokenList.
Використання supports() найчастіше зустрічається у ситуаціях, коли потрібно гарантувати сумісність з різними браузерами або версіями специфікацій. Наприклад, перед використанням нового токену CSS можна перевірити чи він підтримується поточною реалізацією:
const element = document.getElementById('myElement');
const classes = element.classList;
if (classes.supports('new-css-token')) {
classes.add('new-css-token');
} else {
// Альтернативна обробка для браузерів, що не підтримують токен
}
У цьому прикладі ми отримуємо об'єкт DOMTokenList через властивість classList елементу. Потім використовуємо supports('new-css-token') для перевірки, чи підтримується токен new-css-token. Якщо так, ми додаємо його до списку класів елементу через метод add(). Інакше виконується альтернативний код.
Метод supports() також може бути корисним для визначення можливостей реалізації DOMTokenList перед використанням додаткових методів або властивостей. Наприклад, деякі реалізації можуть підтримувати нестандартні токени:
const supportsCustomTokens = classList.supports('custom-token');
if (supportsCustomTokens) {
// Використовуємо нестандартні токени
} else {
// Використовуємо лише стандартні токени
}
Загалом, DOMTokenList.supports() забезпечує зручний спосіб перевірки підтримки токенів у реалізації DOMTokenList, що допомагає написанню коду, сумісного з різними браузерами та версіями специфікацій. Це особливо важливо в контексті розробки веб-додатків, де різноманітність платформ вимагає ретельного тестування та обробки різних випадків.
| Порада: | Використовуйте |
| Порада: | Використовуйте |
| Порада: | Пам'ятайте, що |
Синтаксис
supports(token)Параметри
- *
token Рядок, що містить токен для запиту.
Return
booleanПовертає логічне значення, яке вказує на те, чи був знайдений токен.
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
49 |
49 |
10.1 |
36 |
17 |
| Переглядач | ||||
|---|---|---|---|---|
49 |
49 |
49 |
10.3 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
У цьому прикладі користувач вводить будь-яке CSS-правило (наприклад, display: grid; або backdrop-filter: blur(5px);) у текстове поле, після чого натискає кнопку "Перевірити підтримку". Скрипт використовує метод CSS.supports() для перевірки, чи підтримує браузер введене правило, і відображає відповідне повідомлення. Це дозволяє користувачам легко перевіряти сумісність CSS-властивостей у різних браузерах.
У цьому прикладі ми використовуємо DOMTokenList.supports() для перевірки, чи підтримується токен "dark-mode" перед додаванням його до елементу. Це може бути корисним для реалізації темного режиму інтерфейсу, який підтримується не всіма браузерами.
const element = document.getElementById('myElement');
const classes = element.classList;
// Перевіряємо підтримку токену "dark-mode"
if (classes.supports('dark-mode')) {
classes.add('dark-mode'); // Додаємо токен до елементу
} else {
console.log('Темний режим не підтримується');
}У цьому прикладі ми використовуємо DOMTokenList.supports() для визначення можливостей реалізації DOMTokenList та вибору відповідної стратегії для маніпуляції класами CSS. Це дозволяє нам написати код, який працюватиме коректно в різних браузерах та середовищах.
const element = document.getElementById('myElement');
const classes = element.classList;
// Перевіряємо підтримку нестандартних токенів
const supportsCustomTokens = classes.supports('custom-token');
// Функція для додавання класів
function addClass(className) {
if (supportsCustomTokens) {
// Використовуємо нестандартні токени
classes.add(className);
} else {
// Використовуємо лише стандартні токени
const tokenList = className.split(' ');
for (const token of tokenList) {
classes.add(token);
}
}
}
// Додаємо кілька класів
addClass('class1 class2 custom-token');