display属性在IE和火狐下的兼容

在做一个web应用时有用到表格行的现实与隐藏问题，开始实现如下：

……
<input type="button" value="test" onclck=test()></input>

<tr class="aa" style="display:none"><td>……</td><tr>

……

<srcipt language="javascript">

function test(){

 if($('.aa').attr('style')=='display:none'){

　　$('.aa').removerAttr('style');

}else{

　　$('.aa').attr('style','display:none');

}

}

</script>

    在火狐下可以正常运行，但是在IE下却不能正确执行  ，分析后认为style属性removerAttr之后，IE下会有undefined异常

后修改代码如下

……
<input type="button" value="test" onclck=test()></input>

<tr class="aa" style="display:none"><td>……</td><tr>

……

<srcipt language="javascript">

function test(){

var flag = $('.aa').attr('style');

 if($('.aa').attr('style')=='display:none'||typeof(flag)!="undefined"){

　　$('.aa').removerAttr('style');

}else{

　　$('.aa').attr('style','display:none');

}

}

</script>

 

 

这样，仍然不能正确执行，于是采用jquery的show和hiden方法

代码如下 

……
<input type="button" value="test" onclck=test()></input>

<tr class="aa" style="display:none"><td>……</td><tr>

……

<srcipt language="javascript">

function test(){

var flag = $('.aa').attr('style');

 if($('.aa').attr('style')=='display:none'||typeof(flag)!="undefined"){

　　$('.aa').show();
}else{

　　$('.aa').hiden()
}

}

</script>

 

这种情况下，在火狐下可以，但是在IE下不行，打印style属性得知，在执行完show方法后，属性style变为"DISPLAY: none"(注意,display为大写，且“:”后有空格)。在火狐下则属性style变为"display: none;"

为了兼容两种浏览器情况，最终代码该为如下：

……
<input type="button" value="test" onclck=test()></input>

<tr class="aa" style="display:none"><td>……</td><tr>

……

<srcipt language="javascript">

function test(){

var flag = $('.aa').attr('style');
if(typeof(flag)!="undefined"){
    flag = flag.toLowerCase();
}

 if(flag=='display: none'||flag=='display: none;''){

　　$('.aa').show();
}else{

　　$('.aa').hiden()
}

}

</script>