当前位置: 代码迷 >> Web前端 >> display属性在IE和火狐上的兼容
  详细解决方案

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

热度:128   发布时间:2012-09-18 16:21:42.0
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>

?

  相关解决方案