代码之家 › 专栏 › 技术社区 › Senica Gonzalez

简单的javascript“未定义”问题

undefined javascript

Senica Gonzalez · 技术社区 · 16 年前

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

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

循环中定义了子级,因此这不是问题。

问题是元素可能没有定义样式属性,因此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,不起作用。

5 回复 | 直到 16 年前

Giuseppe Accaputo 16 年前

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 ,意思是说 儿童风格 存在 ,因此可以访问。如果 儿童风格 计算结果为 false 其余的将被忽略; 儿童风格 不会被访问,因此不会引发任何错误。

Lekensteyn 16 年前

如果 this.child 是 undefined ,中间的下一部分 && ( 和 ) 不会被评估。

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

John Topley 16 年前

不使用 undefined 作为关键字,因为它不存在于JavaScript中。

但是,因为每个变量最初是未定义,然后针对不存在的 未定义 变量通常有效。然而:

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

// [...]

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

相反,使用 typeof foo == "undefined" . 只有实际未定义的变量才会返回字符串 "undefined" 从运算符类型

Tim Down 16 年前

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

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

另外,检查 display 和 visibility 元素的属性 风格 属性不会告诉您元素是否在页面上实际可见,因为 风格 仅对象的conatins值通过 风格 属性或 风格 属性。您需要检查 显示 和 能见度 相反,你可以用它 window.getComputedStyle (或元素的 currentStyle IE中的属性)。

Déjà vu 16 年前

如果您不希望代码因错误而停止(例如 x.style.display 具有 x.style 未定义将触发异常),但您的代码可以继续运行,只需使用 try catch

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

这样代码就不会停止,您有一种方法来捕获问题,也有一种方法来修复问题。