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

主观用例和限制。

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

jQuery's data() - 其功能根据使用的版本推迟。最高版本1.4.3，.data()仅返回通过.data(key, value)设置的自定义任意值。 1.4.4版本的jQuery版本，它将dataset和通过.data(key, value)设置的值作为单个对象返回。有关详细信息，请参阅jQuery .data() docs。

限制：jQuery's data()无法在object，embed和applet元素上设置值，但这些元素可以dataset。
dataset值来自HTML DOM元素，或者可以通过javascript / jquery或任何其他方式动态设置。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

CSS Access元素的数据集仅限于伪元素，但可以按W3 Spec应用于所有元素。但它并没有被所有主流浏览器实现。

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

2 个答案: