Javascript 不遵守 Firefox 中的样式更改

发布于 2024-12-12 09:37:12 字数 1377 浏览 0 评论 0原文

为了简化它,我有以下代码突出显示了我的确切问题:

<!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>

工作示例> http://s .supuhstar.operaunite.com/s/content/testHideShow.htm

在 Opera、Chrome、IE 和 Safari 中,第一个复选框使顶行可见或不可见,第二个复选框使第二行压缩/不可见或扩展/可见。然而,在 Firefox 中,这些都不起作用。为什么不呢?我尝试过很多变体,包括在 onchange 属性中编写原始脚本以及使用其他事件属性,但它始终适用于除 Firefox 之外的所有内容。

To dumb it down, I have the following code highlighting my exact problem:

<!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>

Working example > http://s.supuhstar.operaunite.com/s/content/testHideShow.htm

In Opera, Chrome, IE, and Safari, the first checkbox makes the top row visible or invisible, and the second checkbox makes the second row compressed/invisible or extended/visible. However, in Firefox, neither of these work. Why not? I've tried many variations of this, including writing the raw script in the onchange attribute and using other event attributes, but it always works on everything BUT Firefox.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

独夜无伴 2024-12-19 09:37:12

我很惊讶它可以在其他浏览器上运行...但是 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....你的生活将是天堂;)

I am surprised that it's working on other browsers...but firefox is not executing your JS for the right reasons...it's wrong. Here is how you JS functions should be:

    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';
    }
}

BTW, use Firebug for firefox....your life will be heaven ;)

方觉久 2024-12-19 09:37:12

在 Firefox 中,您需要执行以下操作:

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

如果您可以使用 jQuery,它会提供与浏览器无关的方式来管理可见性(以及几乎所有其他内容):

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

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

In Firefox you'd need to do something like:

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

If you can use jQuery for this it provides browser agnostic ways to manage visibility (and pretty much everything else) :

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

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文