सीएसएस डेटा विशेषता के आधार पर ताज़ा नहीं होंगे/

Question

फिर से रंगना एक एचटीएमएल 5/जे एस आवेदन हम तत्वों का data-attribute के आधार पर कुछ शैलियों के साथ एक दृश्य में:

तरह

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

या

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

सीएसएस

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

यह page reload पर हर जगह ठीक काम करता प्रतीत होता है।

लेकिन जब डेटा-विशेषता जेएस के माध्यम से प्रोग्रामेटिक रूप से सेट हो जाती है, तो सीएसएस गुण सभी प्रासंगिक डेस्कटॉप ब्राउज़र में प्रदान किए जाते हैं, लेकिन मोबाइल सफारी में नहीं।

जे एस हिस्सा इस तरह दिखता है:

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

कैसे उन गुणों (ताज़ा/कुछ फिर से रंगना) लागू करने के लिए मजबूर करने के लिए पर कोई भी विचार?

मैं वर्ग विशेषता और विभिन्न वर्गों का उपयोग कर के रूप में चीजों को यहाँ दिखाया गया है की तुलना में अधिक जटिल हैं से बचने के लिए चाहते हैं ...

Answer 1

ठीक है, डेटा को बदलने विशेषताओं बस सभी में तत्व की एक redraw को गति प्रदान करने प्रतीत नहीं होता ब्राउज़र!

class विशेषता बदलना हालांकि करता है। एक कामकाज की तरह, लेकिन चाल करता है।

this.$el 
     .attr('data-level', this.model.getLevel()) 
     .addClass('force-repaint') 
     .removeClass('force-repaint'); 

के रूप में यहां देखी गई: Changing a data attribute in Safari, but the screen does not redraw to new CSS style