Cross Browser DHTML Reference

Last Update: 22 May 2001

Property	DOM Reference
Property	NN4x	IE4x	OP4x	NN6+	IE5+	OP5+
Window Width	window.innerWidth	window.document.body.clientWidth	window.innerWidth	window.innerWidth	window.document.body.clientWidth	window.innerWidth
Window Height	window.innerHeight	document.body.clientHeight	window.innerHeight	window.innerHeight	document.body.clientHeight	window.innerHeight
Document Scroll Offset (DSOC)	pageXOffset pageYOffset	document.body.scrollLeft document.body.scrollTop		pageXOffset pageYOffset
StyleSheet Properties	document.layers["layerID"].property document.layerID.property Only good for layer properties.	document.all["elementID"].style.property document.all.elementID.style.property		document.getElementById("elementID").style.property
HTML Objects	document.styleID.document.object	document.all.styleID.style.object
Absolutely Positioned Element (Layer)	document.layers["layerID"]	document.all["layerID"]	document.getElementById("layerID")	document.getElementById("layerID")
Layer's Left Style Property	document.layers["layerID"].left Reports as a number. Ex: 100	document.all["layerID"].style.pixelLeft Reports as a string. Ex: 100px	document.getElementById("layerID").style.pixelLeft Reports as a numer. Ex: 100	document.getElementById("layerID").style.left NN6 and IE5 report as a string. Ex: 100px. OP5 reports as a number. Ex: 100
Layer's Top Style Property	document.layers["layerID"].top Reports as a number. Ex: 100	document.all["layerID"].style.pixelTop Reports as a string. Ex: 100px	document.getElementById("layerID").style.pixelTop Reports as a numer. Ex: 100	document.getElementById("layerID").style.top NN6 and IE5 report as a string. Ex: 100px. OP5 reports as a number. Ex: 100
To Move a Layer	document.layers["elementID"].moveTo(x, y) where x and y are integers	document.all["elementID"].style.pixelLeft = x document.all["elementID"].style.pixelTop = y where x and y are integers		document.getElementById("elementID").style.left = "100px" document.getElementById("elementID").style.top = "40px" or document.getElementById("elementID").style.left = x + "px" document.getElementById("elementID").style.top = y + "px" where x and y are integers
Layer Visibility	document.layers["layerID"].visibility Possible values are: "show", "hide", or "inherit".	document.all[elementID].style.visibility = "hidden" Possible values are: "hidden", "visible", or "inherit".	document.getElementById("elementID").style.visibility Possible values are: "hidden", "visible", or "inherit".
Layer Width	not supported	document.all[layerID].style.pixelWidth	document.getElementById("layerID").style.pixelWidth	document.getElementById("layerID").style.width document.getElementById("layerID").style.offsetWidth		document.getElementById("layerID").style.pixelWidth
Layer Height	not supported	document.all[layerID].style.pixelHeight	document.getElementById("layerID").style.pixelHeight	document.getElementById("elementID").style.height		document.getElementById("layerID").style.pixelHeight
Layer Overflow				document.getElementById("elementID").style.overflow valid values for the overflow property are: "auto", "hidden", "scroll"
Clip				document.getElementById("elementID").style.clip clip property takes form of: "rect(0px 50px 50px 20px)" or you can set it to auto: "rect(auto auto auto auto)"
Layer Background Color	document.layers["layerID"].bgColor	document.all["layerID"].style.backgroundColor	not supported	document.getElementById("layerID").style.backgroundColor		document.getElementById("layerID").style.background
Layer Background Image	document.layers["elementID"].background	not supported	not supported	document.getElementById("elementID").style.backgroundImage	not supported	not supported
Border Color				document.getElementById("elementID").style.borderColor
Border Style				document.getElementById("elementID").style.borderStyle
Border Width				document.getElementById("elementID").style.borderWidth
Content of Layer	To change content: document.layers["layerID"].load("pathNfileName", width)	document.all[elementID].innerHTML	not supported	document.getElementById("elementID").innerHTML (Not part of W3C Standard.)		not supported
Font Color	not supported	document.all[layerID].style.color	not supported	document.getElementById("elementID").style.color
Relative Position of Layer to Page	document.layers["layerID"].pageX document.layers["layerID"].pageY
Element's Z-Index Property	document.layers["layerID"].zIndex Must be 0 or a positive integer.

Example Absolutely Positioned Element:

<html>
<head><title>Example</title></head>
<body>
<div id="testDiv"
     style="position: absolute; left: 50px; top: 20px;
            width: 200px; height: 100px;
            background-color: #ff3399; visibility: visible;
            clip: rect(0px 200px 100px 0px);">
</div>
</body>
</html>

Ok, I normally would not write style information inline, I'd place the style declarations in a style sheet. Unfortunately, in this instance its necessary. NN6 and IE 5 have an unfortunate behavior in which style values declared in a stylesheet are not populated into an element's style collection. Go figure. I don't know whether this is a bug, or the correct behavior according to W3C specs and the cascade mechanism. Regardless, to write DHTML that works consistently in NN6, IE5, and OP4+, you must declare the style information for your divisions inline. Yuk!