javascript - 如何处理getElementById返回Null

在我们的Web应用程序上有很多页面。其中一些包含元素“ Ribbon.ListForm.Display.Manage.Workflows-Medium”，而某些页面则没有。

我想使用相同的脚本来检查所有页面。脚本将隐藏元素“ Ribbon.ListForm.Display.Manage”，“ Ribbon.ListForm.Display.Manage.Workflows-Medium”和“ Ribbon.ListForm.Display.Manage.CheckOut-Large”。

 function hideEdit() {
        var edit = document.getElementById("Ribbon.ListForm.Display.Manage");
        if (typeof edit !== "undefined" && edit.value == ''){edit.style.display = "none";};
        var wf = document.getElementById("Ribbon.ListForm.Display.Manage.Workflows-Medium");
        if (typeof wf !== "undefined" && wf.value == ''){wf.style.display = "none";};
        var checkout = document.getElementById("Ribbon.ListForm.Display.Manage.CheckOut-Large");
        if (typeof checkout !== "undefined" && checkout.value == ''){checkout.style.display = "none";};
}

问题是页面不包含“ Ribbon.ListForm.Display.Manage.Workflows-Medium”（第二个元素），但包含“ Ribbon.ListForm.Display.Manage.CheckOut-Large”（第三个元素）时，脚本是将在错误处停止在中间[对象为null或未定义]。因此，第一个元素被隐藏，而第三个元素则未被隐藏。

您能否建议如何修改我的脚本？谢谢。

最佳答案

因为如果没有找到元素，getElementById()返回null。


  element是对Element对象的引用；如果元素是null
  指定的ID不在文档中。


您可以只检查真实值，而不必使用typeof测试

if (edit && edit.value == ''){edit.style.display = "none";};

演示：Fiddle