birnbaum birnbaum - 1 year ago 43
Javascript Question

CSS not responding to data-attribute set via jQuery

I am setting a

attribute on document ready via jQuery on several divs. The setting definitely works. For example, calling the below code in the Chrome console is returning


However in the CSS the below is not doing anything.


in the div is working though. What am I doing wrong? Thanks for the help

Answer Source

Setting a data attribute as you are means that it is stored in jQuery's cache (which is an object in memory), it does not get set as an attribute on the element and therefore no CSS selector will see it.

You would need to manually set the data attribute using attr for this to work:

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

Note however, that this will see slightly reduced performance when retrieving the data value, although we're talking miliseconds.