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

我可以在一个HTML"data-"元素中有多个值吗？类似于类可以具有多个类名.

如果可能的话,我想创建一个CSS/JS库,它使用一个"data-"元素来容纳所有的库样式.例如:

这样,任何程序员自定义样式规则都可以进入元素类.我的理由是让可读性更容易,所以它一起看起来像:

Quentin.. 35

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

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

类似于类可以具有多个类名.

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

your_data_attribute_value.split(" ");如果您愿意,可以使用JavaScript .

使用CSS处理此问题将使用~= 属性选择器.

[att~ = val]
表示具有att属性的元素,该属性的值是以空格分隔的单词列表,其中一个单词恰好是"val".如果"val"包含空格,它将永远不会表示任何内容(因为单词用空格分隔).此外,如果"val"是空字符串,它将永远不会代表任何东西.

Jonathan Lam.. 6

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

如果你想这样做,你可能split()稍后会在JavaScript 中将它变成一个可用值数组.

在JSFiddle.net上查看此示例.

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

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

类似于类可以具有多个类名.

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

your_data_attribute_value.split(" ");如果您愿意,可以使用JavaScript .

使用CSS处理此问题将使用~= 属性选择器.

[att~ = val]
表示具有att属性的元素,该属性的值是以空格分隔的单词列表,其中一个单词恰好是"val".如果"val"包含空格,它将永远不会表示任何内容(因为单词用空格分隔).此外,如果"val"是空字符串,它将永远不会代表任何东西.

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

如果你想这样做,你可能split()稍后会在JavaScript 中将它变成一个可用值数组.

在JSFiddle.net上查看此示例.

CSS有快捷方式.class选择器,但它实际上是将名为"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和数据属性).