javascript - CSS by data-attribute will not refresh/repaint -


in html5/js application have view styles depending on data-attribute of elements:

like

<li data-level="0"></li> 

or

<li data-level="1"></li> 

css

li[data-level^="1"] {   /* styles */ } 

this seems work fine everywhere on page reload.

but when data-attribute set programmatically via js, css properties rendered in relevant desktop browsers, not in mobile safari.

js part looks this:

this.$el.attr('data-level', this.model.getlevel()) 

any ideas on how force apply properties (refresh/repaint something) ?

i avoid using class attribute , different classes things more complex shown here...

ok, changing data attributes doesn't seem trigger redraw of element in browsers !?

changing class attribute does. kind of workaround, trick.

this.$el        .attr('data-level', this.model.getlevel())        .addclass('force-repaint')        .removeclass('force-repaint'); 

as seen here: changing data attribute in safari, screen not redraw new css style


Comments

Popular posts from this blog

basic authentication with http post params android -

vb.net - Virtual Keyboard commands -

css - Firefox for ubuntu renders wrong colors -