Question

In sample code of the yui library, I see this notation:

var obj = document.getElementById("coffee_msg");
obj.style.display = 'block';

As obj is only used once, I would rather prefer this:

document.getElementById("coffee_msg").style.display = 'block';

Is there any reason why the first notation is used in the yui library and many other places?
Are there incompatibilities with certain browsers?

Answer 1

If you only need to set one property it doesn’t matter at all (as long as you do not want to check if the return value is valid before trying to access a property of it).

However, if you have multiple properties you’ll want to do the lookup only once (even though an id lookup is extremely fast), so assigning the element to a variable is the way to go in that case.

Of course you could make this even shorter with jQuery: $('#coffee_msg').show()
Also has the advantage that you do not get an error if the element does not exist for some reason. And if you want to set multiple CSS properties etc, you can simply use a function that does that for you with a single call or chain multiple calls to different jQuery methods.