Javascript 可以在 Firefox 上运行，但不能在 Chrome 和 IE6 上运行

Question

我的 javascript 在 Firefox 3.x.x 中运行良好，但在 IE*、Chrome、Safari 中无法运行。调用函数之前的简单警报工作。这是代码

function showDiv(div){
 //alert(div);
 document.getElementById(div).style.visibility='visible';
 document.getElementById(div).style.height='auto';
 document.getElementById(div).style.display='block';}
function hideDiv(div){
 //alert(div);
 document.getElementById(div).style.visibility='hidden';
 document.getElementById(div).style.height='0px';
 document.getElementById(div).style.display='none';
}

这里是html页面代码

<td align="center"><a onclick="showDiv('<?=$val['keyname']?>')" style="cursor:pointer;">Edit</a></td>

如果我将alert() 放在showDiv('<?=$val['keyname']?>') 之前，则会显示警告框，但在fire fox 以外的其他浏览器中不会调用该函数

请告诉我解决方法。

Answer 1

我觉得语法没问题。

确保文档中没有多个具有相同 ID 的元素，并且您的元素 ID 有效。

Answer 2

您发布的代码本质上没有任何错误。我建议您发布一个可复制的非工作示例：问题将在页面的其他地方。也许div ID 字符串不是唯一的（这是无效的 HTML，会使行为不可靠）；也许有其他脚本干扰，也许你有触发这个的事件代码不是以跨浏览器的方式编写的

但是，您尝试以三种不同的方式隐藏元素对我来说似乎有些矫枉过正。只需一个 display 更改就可以了。

另一种方法是设置className='hidden' 或''，并使用CSS 规则将该类映射到display: none。这样做的好处是您不必知道有问题的元素是<div>（应该恢复为display: block）、<span>（应该恢复为display: inline）还是其他什么。 （与表格相关的元素有特殊的问题。）

Answer 3

也许你可以试试：

function showDiv(div) {
    var obj = document.getElementById(div);
    if (obj) {
        obj.style.display = "block";
        obj.style.height = "auto";
    } else {
       alert("DIV with id " + div + " not found. Can't show it.");
    }
}

function hideDiv(div) {
    var obj = document.getElementById(div);
    if (obj) {
        obj.style.display = "none";
    } else {
       alert("DIV with id " + div + " not found. Can't hide it.");
    }
}

不要在同一个函数中多次调用document.getElementById，使用一个变量来存储div元素。

if (obj) 测试只会在document.getElementById(...) 找到代码时执行。