javascript - JQuery 通过更改属性更改元素的预定义样式在 ie 中不起作用

Question

我的 CSS 中有一些基于元素属性的预定义样式。如果我将属性的值更新为也具有预定义样式的新内容，则该样式将应用于 FF 和 Chrome，但不会应用于 IE。请查看示例并在输入字段中输入。

JS:

$('input').on('keypress', function(){
    var l = parseInt($(this).attr('level'), 10) + 1;
    $(this).attr('level', l);
});

CSS:

input[level="0"]{background:red;}
input[level="1"]{background:blue;}
input[level="2"]{background:green;}
input[level="3"]{background:black;}

http://jsfiddle.net/ce6S4/

感谢任何帮助，谢谢。

编辑:适用于 IE 9 但不适用于 <= 8

Answer 1

这是一个 IE 错误。请注意，当您调整窗口大小时，该元素会正确呈现。

通过设置类名触发回流:

this.className = this.className; // Or .addClass(' ');

演示:http://jsfiddle.net/ce6S4/6/

$('input').on('keypress', function(){
    var l = parseInt($(this).attr('level'), 10) + 1;
    $(this).attr('level', l).addClass(' ');
});