Question

我可以在一个HTML“data-”元素中包含多个值吗？类似于类可以具有多个类名。

如果可能的话，我想创建一个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>

Answer 1

我可以在一个HTML＆＃34;数据中使用多个值 - ＆＃34;元件？

你可以有一个字符串。规范没有为属性中的数据定义任何特定格式，该格式旨在由特定于站点的 JavaScript处理。

类似于一个类可以有多个类名。

class属性采用空格分隔的类列表。

如果您愿意，您的JavaScript可以your_data_attribute_value.split(" ");。

使用CSS处理此问题会使用~= attribute selector。

<强> [ATT〜= VAL]
表示具有att属性的元素，该属性的值是以空格分隔的单词列表，其中一个正好是＆＃34; val＆＃34;。如果＆＃34; val＆＃34;包含空格，它永远不会代表任何东西（因为单词用空格分隔）。如果＆＃34; val＆＃34;是空字符串，它永远不会代表任何东西。

Answer 2

AFAIK，我不认为data-属性可以将其转换为数组。相反，我认为它会将其解释为一个值，但是允许的。

如果你想这样做，你以后可能需要split()稍后在JavaScript中将其变为可用值数组。

请参阅JSFiddle.net上的this example。

Answer 3

CSS具有快捷方式.class选择器，但它实际上将名为“class”的属性解析为空格分隔值的列表。以下属性选择器在非快捷方式中支持此功能：

<强> [att~=val]

表示具有att属性的元素，该属性的值是以空格分隔的单词列表，其中一个正好是“val”。如果“val”包含空格，则它将永远不会表示任何内容（因为单词用空格分隔）。如果“val”是空字符串，它也不会代表任何东西。

由于你的问题被标记为CSS，你可能正在寻找它。关于如何完成属性值解析的规则也在该文档中给出，因此如果您尝试在此使用的javascript库（如果有的话）不会覆盖它，则应该很容易添加：< / p>

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

使用white-space正则表达式进行拆分将字符串属性值解析为带有javascript和Jquery库的数组（用于访问DOM和data属性）。