Q:

Simple Javascript "undefined" question

I'm iterating over a bunch of child nodes and checking to see if they are actually visible on the page with this statement:
if(child.offsetWidth == 0 || child.offsetHeight == 0 || child.style.visibility == 'hidden'     || child.style.display == 'none'){

child is defined in the loop so that's not an issue.
What is an issue is that elements might not have a style attribute defined and so javascript returns "child.style" not defined.
How do I do a seemingly simple if statement like this without it stopping because something is not defined?
I tried doing this:
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);
}

But I think addquery is just evaluating to true and not working.

A:

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

Since && is a short-circuit operator, it will only evaluate child.style.visibility == 'hidden' || child.style.display == 'none' if child.style evaluates to true, meaning that child.style exists, and therefore can be accessed. If child.style evaluates to false, the rest will just be ignored; child.style won't be accessed, and therefore no errors will be thrown.

A:

If this.child is undefined, the next part between && ( and ) won't be evaluated.
if(child.offsetWidth == 0 || child.offsetHeight == 0 || typeof child.style != 'undefined' && (child.style.visibility == 'hidden' || child.style.display == 'none')){

