在 CSS 中显示数据集中的数据?

Question

如果我执行以下操作：

$('.js-element').attr("data-count", 2)

那么我可以使用 CSS 显示该值：

.js-element:after {
content: attr(data-count);
}

但是如果我执行以下操作：

$('.js-element').data("count", 2)

然后相同的 CSS 代码不显示任何内容。

据我了解，区别在于，在第一种情况下，我只是在 HTML 元素上设置一个属性，我碰巧以数据为前缀，而在第二种情况下，我设置 HTML 元素的数据集属性。

我的问题是：

• 其中一种方法可以被认为比另一种更好吗？
• 如何让 CSS 显示数据集中的值？

Answer 1

据我了解，区别在于，在第一种情况下，我只是在 HTML 元素上设置一个属性，我碰巧用数据作为前缀

是的

而在第二种情况下，我正在设置 HTML 元素的数据集属性。

不。您正在设置 jQuery 的内部数据存储。

其中一种方法可以被认为比另一种更好吗？

这是主观的

如何让 CSS 显示数据集中的值？

设置数据集值 (document.querySelector('.js-element').dataset.count = 2(，该值将自动映射到属性。

Answer 2

1. 对用例和限制是主观的。

   element.dataset- 它仅包含自定义data-*属性。

   jQuery's data()- 其功能根据所使用的版本而延迟。在版本 1.4.3 之前，.data()仅返回通过.data(key, value)设置的自定义任意值。jQuery 版本从 1.4.4 开始，它将通过.data(key, value)设置的dataset和值作为单个对象返回。请参阅 jQuery .data(( 文档以获取更多信息。

   限制：jQuery's data()不能在object、embed和applet元素上设置值，但这些元素可以有dataset。

2. dataset值取自HTML DOM元素，也可以通过javascript/jquery或任何其他方式动态设置。

var elem = document.querySelector("#para");
setTimeout(function(){
elem.dataset.before="Modified Before Content";
elem.dataset.after="Modified After Content";
},1000);

p::before
{
content : attr(data-before)
}
p::after
{
content : attr(data-after)
}

<p id="para" data-before="Before Content" data-after="After Content">
<br>
Middle
<br>
</p>

CSS 对元素数据集的访问仅限于伪元素，尽管它可以根据 W3 规范应用于所有元素。但它尚未被所有主流浏览器实现。