简单的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只是评估为true而不起作用。

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.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财产不会告诉你的元素是否是页面或不实际可见，因为style对象只能通过conatins元素上显式地设置值style属性或style属性。 您需要检查display和visibility的计算值，而您可以使用window.getComputedStyle （或IE中元素的currentStyle属性）来进行计算。

Answer 5

如果您不希望由于错误而停止代码（例如x.style.display与x.style undefined会触发异常），但是您的代码可以继续使用，只需使用try catch

   try {
        ...child.style.visibility...
   } catch(e) {
        // do either nothing or set child.style for instance
   }

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