Могу ли я иметь несколько значений в одном элементе HTML "data-"?

Могу ли я иметь несколько значений в одном элементе "data-" HTML? Подобно тому, как класс может иметь несколько имен классов.

Если возможно, я хотел бы создать библиотеку CSS/JS, которая использует один элемент "data-" для размещения всех стилей библиотеки. Например:

<div data-library-name="xs-hidden col-md-10 col-xl-8 big-hero"></div>

Таким образом, любой из правил пользовательского стиля программистов может войти в класс элементов. Мое рассуждение заключается в том, чтобы упростить читаемость, поэтому вместе это выглядело бы так:

<div class="custom-style another-style" data-library-name="xs-hidden col-md-10 col-xl-8 big-hero"></div>

ОТВЕТЫ

Ответ 1

Могу ли я иметь несколько значений в одном элементе "data-" HTML?

У вас может быть строка. Спецификация не определяет какой-либо конкретный формат для данных в атрибуте, который предназначен для обработки JavaScript на основе сайта.

Аналогично тому, как класс может иметь несколько имен классов.

Атрибут class принимает список разделенных пробелами классов.

Ваш JavaScript может your_data_attribute_value.split(" ");, если хотите.

Обработка этого с помощью CSS будет использовать селектор атрибутов ~= .

[ATT ~ = значение]
Представляет элемент с атрибутом att, значение которого представляет собой список слов, разделенных пробелами, один из которых является точно "val" . Если "val" содержит пробелы, он никогда не будет представлять ничего (поскольку слова разделены пробелами). Также, если "val" - это пустая строка, она никогда ничего не представит.

Ответ 2

AFAIK, я не думаю, что атрибуты data- могут преобразовать это в массив. Вместо этого я думаю, что он будет интерпретировать его как одно значение, но это разрешено.

Если вы захотите это сделать, вам, вероятно, придется split() использовать его позже в JavaScript в массив доступных значений.

Смотрите этот пример на JSFiddle.net.

Ответ 3

У CSS есть ярлык .class, но он фактически разбирает атрибут с именем "класс" в качестве списка для значений, разделенных пробелами. Это поддерживается в форме без ярлыков следующим селектором атрибутов:

[att~=val]

Представляет элемент с атрибутом att, значение которого представляет собой список слов, разделенных пробелами, один из которых является точно "val" . Если "val" содержит пробел, он никогда не будет представлять ничего (поскольку слова разделены пробелами). Если "val" - это пустая строка, она никогда не представит ничего.

Ссылка: http://www.w3.org/TR/CSS2/selector.html#class-html

Как ваш вопрос помечен CSS, вы, возможно, ищете это. Правила того, как выполняется синтаксический анализ значений атрибутов, также указывается в этом документе, поэтому в случае, если библиотека javascript, которую вы пытаетесь использовать на этом (если есть), не будет охватывать это, добавить:

var list = $("div").data("library-name").split(/\s+/);
                                         ^^^^^^^^^^^^

Этот раскол с регулярным выражением белого пространства анализирует значение атрибута строки в массиве с javascript и библиотекой JQuery (для доступа к DOM и атрибуту data).