Setting style with javascript unexpected results

Question

Hello,

I am detecting browsers and trying to apply style,

alert(BrowserDetect.browser);
if(BrowserDetect.browser == "Opera") {
    document.getElementById(myBox).style.paddingTop = "5px";
}

Alert Shows the browsers name accurately but why is the style not getting applied?

Answer 1

Try adding an alert inside the if and see if it executes. Chances are, there's whitespace around the Operastring.

Answer 2

Put two copies of the alert() call inside the if statement, one before the style assignment and one after. I think you'll find that the second doesn't happen, for any of several reasons:

1. The variable myBox doesn't exist
2. myBox has a value that is not an ID of a valid DOM element
3. myBox does name a valid element, but it is not a block type element, so padding doesn't apply

You can also try running the same code in another browser with a solid JS debugger, like Firefox + Firebug or Safari with the Develop tools enabled. (Preferences | Advanced.) This may lead you to the problem with that style assignment faster.