当data- *属性更改时如何更新元素

Question

I have an element with following css style: #element:after { content: attr(data-percent); } #element:after { content: attr(data-percent); }

I'm trying to change data-percent attribute with JQuery like this $('#element').data('percent', '50%');

Attribute changes, I can check it by console.log($('#element').data('percent')); , but it won't redraw and still contains old attribute.

What function should I call to make this element updated?

Answer 1

jQuery's data takes the attribute as the initial value , but it doesn't use it to actually store the data, which is cached in memory instead.

This allows to store whatever value you want, instead of mere strings as per HTML5 standards.

If you actually want to use the attribute to store the data, use

$('#element').attr('data-percent', '50%');

Answer 2

jQuery cannot reference and/or end :after or :before pseudo elements. CSS elements do not appear to automatically update what the referenced attr() changes.

My suggestion would be to not use a pseudo element.