Question

我的css中有一些基于elements属性的预定义样式。如果我将属性的值更新为具有预定义样式的新内容，则样式将应用于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(' ');
});

Answer 2

http://jsfiddle.net/ce6S4/3/

试试这个

   $('input').on('keydown', function(){
         var l = parseInt($(this).attr('level'), 10) + 1;
    alert(l); //can be removed.
         $(this).attr('level', l.toString()).hide().show().focus();

});

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

2 个答案:

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