CSS bởi dữ liệu thuộc tính sẽ không làm mới/sơn lại

Question

Trong một ứng dụng HTML5/JS chúng ta có một cái nhìn với một số phong cách tùy thuộc vào data-attribute của các yếu tố:

như

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

hoặc

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

CSS

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

Điều này dường như hoạt động tốt ở mọi nơi trên page reload.

Nhưng khi thuộc tính dữ liệu được đặt theo lập trình qua JS, thuộc tính CSS được hiển thị trong tất cả trình duyệt trên máy tính để bàn có liên quan, nhưng không được đặt trong safari di động.

JS phần trông như thế này:

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

Bất kỳ ý tưởng về cách để buộc áp dụng những tài sản (refresh/sơn lại một cái gì đó)?

Tôi muốn tránh sử dụng các thuộc tính lớp và các lớp học khác nhau như điều phức tạp hơn thể hiện ở đây ...

Answer 1

ok, thay đổi dữ liệu thuộc tính đơn giản dường như không để kích hoạt một vẽ lại của nguyên tố này trong tất cả trình duyệt!

Tuy nhiên, thay đổi thuộc tính class. Loại giải pháp thay thế, nhưng thực hiện thủ thuật.

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

Như đã thấy ở đây: Changing a data attribute in Safari, but the screen does not redraw to new CSS style