我能否在一个HTML的"data-"元素中有多个值？

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>

- Mark Beleski

---

您的 data-library-name 属性将只有一个值，而不是四个唯一的值。 - Kilmazing

是的和不是。它将是一个单一的数据属性值，但您可以使用JavaScript将其拆分为单独的值。 - j08691

你可以在值之间放置一个“分隔符”，例如 * 或者 |。 - www139

Answer 1

我可以在一个HTML的"data-"元素中有多个值吗？

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

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

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

如果喜欢，您的JavaScript可以使用your_data_attribute_value.split(" ");。

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

[att~=val]

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

- Quentin

Answer 2

据我所知，我认为data-属性不能将其转换为数组。相反，我认为它会将其解释为一个值，但是这是允许的。

如果你想这样做，你可能需要稍后在JavaScript中使用split()将它分割成可用值的数组。

参见此示例在JSFiddle.net上。

- Jonathan Lam

Answer 3

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

[att~=val]

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

参考：http://www.w3.org/TR/CSS2/selector.html#class-html 由于您的问题标记为CSS，您可能正在寻找这种选择器。在该文档中还提供了如何解析属性值的规则，因此如果您尝试使用此库（如果有）并且它无法覆盖该规则，则应很容易添加此规则。

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

这个使用空格正则表达式的分割，用javascript和Jquery库（用于访问DOM和数据属性）将字符串属性值解析成数组。

- hakre