我们能在CSS中指定自定义数据属性值吗？

Question

在元素上，我可以像这样指定数据属性：

<div data-widget-type="MyWidgetType1" data-property1="20" data-property2="test">
...
</div>

我希望将这些内容捕获到一个类中，例如：

.MyClass1 {
 data-widget-type:"MyWidgetType1";
 data-property1:"20";
 data-property2:"test";
}

<div class="MyClass1">
...
</div>

有没有一种方法可以在CSS中指定数据属性的值？

- Nitesh

---

不，那是不可能的。 - Stephan Muller

@Stephan Muller 你不觉得这会是CSS的一个好扩展吗？ - Nitesh

Answer 1

CSS不是HTML。您不能使用CSS设置或更改HTML属性的值。

此外，为什么要这样做呢？ HTML和CSS之所以存在是因为它们各司其职。 HTML用于内容，CSS用于展示。在CSS中指定数据属性与在HTML中指定展示属性没有任何区别。

如果您正在尝试将元数据分配给一个类名，然后应用于具有该类名的所有元素，那么这完全超出了CSS的职责范围，并且在HTML中根本不可能。将元数据分配给元素的唯一方法是在该元素上指定属性。（如果您不想在标记中指定每个类的属性声明，则可以将属性声明移动到脚本中，但归根结底，脚本仍必须将每个元素的数据集填充以下这些值。但根据您的需求，这可能已经足够了。）

- BoltClock

---

我想将一个类指定给div，但是基于媒体查询和浏览器/ua类型，我希望有完全不同的类定义。 - Nitesh

那么你不需要CSS，你需要由媒体查询控制的属性。这些属性在HTML中也不存在 - 你仍然需要一个脚本。 - BoltClock

刚刚了解到 CSS 自定义属性：https://www.w3.org/TR/css-variables/。看看能否用于所讨论的情况。 - Nitesh

@Nitesh：不行，你不能这样做。如果自定义属性适用于此处，我会告诉你的。去年我告诉你的一切仍然有效，无论你是否喜欢（根据你对Stephan的回复，我觉得你似乎并不接受，那是你的权利）。 - BoltClock

是的，我发现我的情况并不适合使用CSS自定义属性。我同意并理解了你所说的，因此用另一种方式解决了我的问题。我仍然不明白的是 - 是否扩展CSS类似于我所问的那样，是一个好主意还是不好？谢谢。 - Nitesh

Answer 2

不，即使是默认属性也没有这样的功能（例如你不能通过CSS设置“name”属性）。但是你可以选择这些自定义属性：

.MyClass1[data-widget-type="MyWidgetType1"]

- Justinas

---

不确定如何在HTML中设置属性。 - Mr. Alien

@Mr.Alien 它不会设置任何内容，它只是 CSS 选择器。你无法通过 CSS 操作 DOM 元素。 - Justinas

是的，我们不能这样做，因此答案应该是直接的“不”。我认为选择不在问题的范围内。 :) - Mr. Alien

@Mr.Alien 不，没有这样的功能。 - Justinas

Answer 3

在CSS中可以使用[attribute]值来选择一个类，但我不认为CSS能够更新该属性。

https://css-tricks.com/almanac/selectors/a/attribute/

要更新属性，您需要找到一个jQuery或类似的解决方案。

编辑：在jQuery中，您可以像这样更新属性：

$("#fieldId").attr("attribute-name","value you want to set");

- Aaron Lavers

Answer 4

有一种方法可以获取您属性的值，但并非所有浏览器都支持：

https://developer.mozilla.org/en-US/docs/Web/CSS/attr

我不知道这是否是你正在寻找的内容

- Pablo Máximo