CSS没有响应通过jQuery设置的数据属性

Question

我在几个div上通过jQuery在文档就绪上设置了data-position属性。设置肯定有效。例如，在Chrome控制台中调用以下代码即会返回'left'。

$('.card-container').data('position');

然而，在CSS中，下面没有做任何事情。

[data-position='left']

div中的硬编码data-position="left"正在运行。我究竟做错了什么？谢谢你的帮助

Answer 1

设置data属性意味着它存储在jQuery的缓存（内存中的对象）中，它不会被设置为元素的属性，因此没有CSS选择器会看到它

您需要使用data手动设置attr属性才能生效：

$('.card-container').attr('data-position', 'left');

但请注意，在检索数据值时，这会略微降低性能，尽管我们说的是毫秒。

Answer 2

$('.card-container').attr('data-position',"set your value");

参考 attr

Answer 3

jQuery的data() method实际上并没有改变属性。要更改元素本身的属性，您必须使用attr()：

$('.card-container').attr('data-position', 'value');