简单的Javascript"未定义"问题

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')))

由于它&&是一个短路运算符,它只会评估child.style.visibility == 'hidden' || child.style.display == 'none'是否child.style评估true,意味着child.style 存在,因此可以访问.如果child.style评估为false,则其余部分将被忽略; child.style将无法访问,因此不会抛出任何错误.