At runtime an HTML element is presented as a DOM element object. You can add attributes by assigning them to the object.

var myElement = document.getElementById('testDiv');
myElement.mood = 'happy';

What happens if you are dealing with custom attributes that are not assigned at runtime but on the sever side? You will notice two characteristics: at first, all attribute names are lowercased by the browser and secondly this will not work as you expect.

Imagine you have this HTML element:

 
<div id="testDiv" foo="bar"></div>
 

and this script:

var myElement = document.getElementById('testDiv');
alert(myElement.foo);

This alert box will show undefined. It seems that only HTML attributes which are described in the HTML specification (such as id, lang or title) are applied as attributes to the DOM element object. Of course, there are exceptions for this rule: the Internet Explorer applies all attributes to the object.

I made a comparision sheet showing which browser supports which behavior.

		Firefox 2	Opera 9	Safari 3	IE 7
attribute set by assigning
	element.attributeName	yes	yes	yes	yes
	element.getAttribute()	null	null	null	yes
attribute set by setAttribute()
	element.attributeName	undefined	undefined	undefined	yes
	element.getAttribute()	yes	yes	yes	yes
attribute set on server side
	element.attributeName	undefined	undefined	undefined	yes
	element.getAttribute()	yes	yes	yes	yes

So, if you want to use custom attributes while having HTML elements which are created on runtime and on the server side, there is only one possibility: use setAttribute() and getAttribute(). This combination works in every case and in every browser.

An example of different CSS rules overwriting each other.

Luckily we do not have to worry about this — it is the browser's job to apply all rules correctly. There are two ways of retrieving the actual style information. Those on the dark side use element.currentStyle[style property] to get the actual property value. All others use the WC3 method window.getComputedStyle() to get a CSSStyleDecoration object which can be accesed via getPropertyValue(style property).

Note, that the proprietary currentStyle() method has the same syntax as in your CSS files (e.g. background-color) while W3C DOM method uses the syntax you know from JavaScript (e.g. backgroundColor).