Question

为了愚蠢，我有以下代码突出显示我的确切问题：

<!DOCTYPE html><html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script>
function updateR1(){
    if (c1.checked){
        r1.style.visibility='hidden';
    }
    else{
        r1.style.visibility='visible';
    }
}
function updateR2(){
    if (c2.checked){
        r2.style.display='none';
    }
    else{
        r2.style.display='table-row';
    }
}
</script>
</head>
<body>
    <table>
        <tr id="r1">
            <td>visibility</td>
        </tr>
        <tr id="r2">
            <td>display</td>
        </tr>
    </table>
    <div>
        <input id="c1" type=checkbox onchange="return updateR1();">Hide row 1</input>
        <input id="c2" type=checkbox onchange="return updateR2();">Hide row 2</input>
    </div>
</body>
</html>

工作示例＆gt; http://s.supuhstar.operaunite.com/s/content/testHideShow.htm

在Opera，Chrome，IE和Safari中，第一个复选框使顶行可见或不可见，第二个复选框使第二行压缩/不可见或扩展/可见。但是，在Firefox中，这些都不起作用。为什么不？我已经尝试了很多这方面的变体，包括在onchange属性中编写原始脚本并使用其他事件属性，但它始终适用于所有内容但是Firefox。

Answer 1

在Firefox中，您需要执行以下操作：

document.getElementById("r1").style.display="none";
document.getElementById("r1").style.display="block";

如果您可以使用jQuery，它提供了浏览器无关的方法来管理可见性（以及其他所有内容）：

http://api.jquery.com/show/

http://api.jquery.com/hide/

Answer 2

我很惊讶它正在其他浏览器上工作......但firefox没有正确执行你的JS ......这是错误的。以下是JS函数的应用方式：

    function updateR1(){
    if (document.getElementById("c1").checked){
        document.getElementById("r1").style.visibility='hidden';
    }
    else{
        document.getElementById("r1").style.visibility='visible';
    }
}
function updateR2(){
    if (document.getElementById("c2").checked){
        document.getElementById("r2").style.display='none';
    }
    else{
        document.getElementById("r2").style.display='table-row';
    }
}

顺便说一句，使用Firebug for firefox ....你的生活将成为天堂;）

Javascript不遵守Firefox中的样式更改

2 个答案: