为了简单化，我有以下代码突出显示了我的确切问题:
<!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
在 Opera、Chrome、IE 和 Safari 中，第一个复选框使顶行可见或不可见，第二个复选框使第二行压缩/不可见或扩展/可见。然而，在 Firefox 中，这些都不起作用。为什么不？我尝试过很多变体，包括在 onchange 属性中编写原始脚本以及使用其他事件属性，但它始终适用于除 Firefox 之外的所有内容。
最佳答案
我很惊讶它可以在其他浏览器上运行...但是 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';
}
}
顺便说一句，在 Firefox 中使用 Firebug...你的生活将是天堂;)
关于Javascript 不遵守 Firefox 中的样式更改，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7936989/