Question

我正在迭代一堆子节点并使用以下语句检查它们是否在页面上实际可见：

if(child.offsetWidth == 0 || child.offsetHeight == 0 || child.style.visibility == 'hidden'     || child.style.display == 'none'){

在循环中定义了child，这不是问题。

问题是元素可能没有定义样式属性，因此javascript返回未定义的“child.style”。

如果没有停止因为没有定义某些东西，我怎么做这样一个看似简单的if语句呢？

我试过这样做：

if(undefined !== child.style){ var addquery = "child.style.visibility == 'hidden' ||     child.style.display == 'none'"; }
if(child.offsetWidth == 0 || child.offsetHeight == 0 || addquery){
console.debug(child);
}

但我认为addquery只是评估为真而无效。

Answer 1

if(child.offsetWidth == 0 || child.offsetHeight == 0 || (child.style && (child.style.visibility == 'hidden' || child.style.display == 'none')))

由于&&是short-circuit operator，如果child.style.visibility == 'hidden' || child.style.display == 'none'评估为child.style，它只评估true，这意味着child.style 存在，因此可以访问。如果child.style评估为false，其余的将被忽略;将无法访问child.style，因此不会抛出任何错误。

Answer 2

如果this.child为undefined，则不会评估&& (和)之间的下一部分。

if(child.offsetWidth == 0 || child.offsetHeight == 0 || typeof child.style != 'undefined' && (child.style.visibility == 'hidden' || child.style.display == 'none')){

Answer 3

不要将undefined用作关键字，因为它在JavaScript中不存在。

但是，因为最初的每个变量都是未定义的，所以针对不存在的undefined变量进行测试通常会起作用。但是：

var undefined = 5; // this could be anywhere in the code

// [...]

if(foo === undefined) // *not* the test you want to be checking

相反，请使用typeof foo == "undefined"。只有实际未定义的变量才会从typeof运算符

返回字符串"undefined"

Answer 4

检查每个孩子的nodeType财产。如果子元素是一个元素，则保证它具有style属性，并且不需要检查它是否未定义。您的代码清楚地表明它只是您感兴趣的元素，所以您应该确保只处理元素。

if ((child.nodeTye == 1) && [...all the other conditions...]) {...}

此外，检查元素的display属性的visibility和style属性不会告诉您该元素是否在页面上实际可见，因为{{1对象仅通过style属性或style属性对元素进行显式设置。您需要检查style和display的计算值，您可以使用window.getComputedStyle（或IE中的元素的visibility属性）。

Answer 5

如果您不希望因错误而停止代码（例如x.style.display x.style未定义将触发异常），但您的代码可以继续使用，只需使用{{ 1}}

try catch

这样代码就不会停止，你有办法解决问题，也有办法解决问题。

简单的Javascript“未定义”问题

5 个答案: