At this moment, I am working on a new release of a library of html, css and javascript components for a client. The new release mostly consist of new (faster) javascript. This results in slightly different css classes I need to adress.

In helping me define which classes are set on a html element, I wrote this small test script to give me the value of (among others) the className.

(yes, I know the web developer toolbar for firefox by Chris Pedrick but I need to see stuff in IE 6 and below.)

So this is what I wrote, I hope someone else will find it usefull.

function testScript(){
// get all the elements on the page
var test = document.getElementsByTagName("*");
// build a nodelist
for (var i=0;i<length;i++){
// do something on click
test[i].onclick = function (){
// throw an alert with the tagname, classname and value
alert(" tagName = " + this.tagName + "className = " + this.className + " value = " + this.value);
// stop the bubbling, see quirksmode for explanation
// http://www.quirksmode.org/js/events_order.html#link9
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
}
}
}

Drop in to your project and see the value's defined in the alert when you click on something. It also stops bubbling, so you won't be annoyed by the script traveling all the way up through the dom tree.

Have fun using it and let me know if you use it or (better) improved it...

UPDATE 30-11-2006

Finally gotten around to installing the IE developer toolbar and allthough it doesn't match the one for Firefox. It does the job better than my (crappy) javascript solution. So go here and download it...

UPDATE 26-1-2007

Try out my new (jQuery) version