Javascript Test Page

I’ve just been playing with javascript changing the style of an item directly as part of my prep for an AJAX integrated project. Making sure the code is cross browser is really important so I pulled together some bits and pieces from all over the place and have put together a test page with tabbed forms and a style changer.

Javascript Test Page

The key elements are the ability to get the element using any of the browser types.
[js]function getObj(name)
{
if (document.getElementById)
{
this.obj = document.getElementById(name);
this.style = document.getElementById(name).style;
}
else if (document.all)
{
this.obj = document.all[name];
this.style = document.all[name].style;
}
else if (document.layers)
{
this.obj = document.layers[name];
this.style = document.layers[name];
alert (“Sorry, but the browser you are using won’t allow some of the features we are testing.”);
}
}[/js]

and then setting the style[js]function setOneStyle( cStyle, cDef)
{
var obj = new getObj(‘teststring’);
obj.style[cStyle] = cDef;
}[/js]

I’ve tested this with Firefox, IE and Opera and each option works with all 3. Opera however loses the plot a little with borders and relies on the page being scrolled before it shows or removes the border completely.

As with anything the rules for javascript will change, users may have javascript turned off and your code is visible to all (despite the right mouse blockers etc) so never rely on javascript to make your app work properly or to contain anything remotely classifiable as “intellectual property”.