Where Properties Reside

Concentrating on Mozilla, let's look more closely at the properties detected and the HTML that produced the styles. When we retrieve, say, division one's style object with this JavaScript: 

styleObject = document.getElementById( "d1" ).style;

we get the style object that's attached to the tag. The style information defined in the stylesheet is not “merged” in with the information, as was the case in Navigator 4.

Property Mozilla Output Style
Div one visibility "" 
<div id="d1" style=
  "background-color: #ccffcc;
   position: absolute;
   top: 10px; left: 10px;
   width:100px; height: 100px;">
background-color rgb(204,255,204)
left, top, width, height 10px, 10px, 100px, 100px
Div two visibility "" 
<style type="text/css">
#d2 {
   visibility: visible;
   background-color: #ccccff;
   position: absolute;
   top: 10px; left: 110px;
   width: 100px; height:100px;
}
</style>
background-color ""
left, top, width, height "", "", "", ""
Div three visibility "" 
<style type="text/css">
#d3 {
   position: absolute;
   top: 10px; left: 210px;
</style>

<div id="d3"
   style="background-color: cyan">
background-color cyan
left, top, width, height "", "", "", ""

If we needed to use DHTML and JavaScript on only one page, this wouldn't be a problem. We'd simply put all the style information into the tags and have it at our disposal.

What do we do if we have several pages that use the same styles and JavaScript?

  Showing Properties (2) Index Multi-Page Strategies